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

React component library

.DataList {
  --scroll-bar-size: 12px;
}
  .DataList::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }
  .DataList::-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;
  }
  .DataList::-webkit-scrollbar-thumb:hover,
    .DataList::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }
  .DataList::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }
  .DataList::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }
  .DataList::-webkit-scrollbar-corner {
    background: transparent;
  }
  .DataList {
  overflow: hidden auto;
  max-block-size: 40vh;
}
.DataList-animation-enter {
    opacity: 0;
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }
.DataList-animation-enter-active {
    opacity: 1;
    transition:
      opacity var(--transition-default),
      transform var(--transition-default);
    transform: translate(0);
    pointer-events: none;
  }
.DataList-animation-enter-done {
    opacity: 1;
    transform: translate(0);
  }
.DataList-animation-exit {
    opacity: 1;
    transform: translate(0);
    pointer-events: none;
  }
.DataList-animation-exit-active {
    opacity: 0;
    transition:
      opacity var(--transition-default),
      transform var(--transition-default);
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }
.DataList-animation-exit-done {
    opacity: 0;
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }