@ozen-ui/kit/__inner__/esm/components/DataListCard/DataListCard.css

React component library

.DataListCard {
  --scroll-bar-size: 12px;
}
  .DataListCard::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }
  .DataListCard::-webkit-scrollbar-thumb {
    background-color: var(--color-background-secondary);
    border-radius: calc(var(--scroll-bar-size) / 2);
    border: calc(var(--scroll-bar-size) / 4) solid transparent;
    background-clip: padding-box;
    border-image: initial;
    min-block-size: 24px;
  }
  .DataListCard::-webkit-scrollbar-thumb:hover,
    .DataListCard::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }
  .DataListCard::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }
  .DataListCard::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }
  .DataListCard::-webkit-scrollbar-corner {
    background: transparent;
  }
  .DataListCard {
  overflow: hidden auto;
}

  .DataListCard > * {
    margin-block: var(--data-list-card-padding-block);
    margin-inline: var(--data-list-card-padding-inline);
  }

  .DataListCard.DataListCard_size_xs, .DataListCard.DataListCard_size_s {
    --data-list-card-padding-inline: var(--spacing-3xs);
    --data-list-card-padding-block: var(--spacing-3xs);
    gap: var(--spacing-4xs);
  }

  .DataListCard.DataListCard_size_m, .DataListCard.DataListCard_size_l {
    --data-list-card-padding-inline: var(--spacing-2xs);
    --data-list-card-padding-block: var(--spacing-2xs);
    gap: var(--spacing-3xs);
  }