@use "../tokens/color";
@use "../tokens/space";
@use "../tokens/breakpoint";
@use "../tools/generate";
@use "../tools/convert";

@layer utilities {
  [class*="horizontal-scroll"],
  .table-scrollable {
    scroll-snap-type: x mandatory;

    > * {
      scroll-snap-align: start;
    }

    @supports selector(::-webkit-scrollbar) {
      &::-webkit-scrollbar {
        height: convert.to-rem(8px);
        appearance: none;
        background-color: transparent;
        border-radius: 99px;
      }

      &::-webkit-scrollbar-track {
        border: convert.to-rem(1px) solid transparent;
        background-color: var(--color-surface-moderate);
        background-clip: content-box;
        border-radius: 99px;
      }

      &::-webkit-scrollbar-thumb {
        opacity: 1;
        background-color: var(--color-fill-contrast);
        border-radius: 99px;
        border: convert.to-rem(1px) solid transparent;
        background-clip: content-box;
      }

      &:hover::-webkit-scrollbar-thumb,
      &:active::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-thumb:hover,
      &::-webkit-scrollbar-thumb:active {
        border-width: 0;
        background-color: var(--color-fill-secondary) !important;
      }
    }

    @supports not selector(::-webkit-scrollbar) {
      scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);
      scrollbar-width: thin;
    }
  }

  .horizontal-scroll {
    @each $breakpoint, $w in breakpoint.$map {
      @include breakpoint.get($breakpoint) {
        &#{generate.variant-name($breakpoint)} {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: auto;
          margin-bottom: space.get("large");
        }

        &#{generate.variant-name($breakpoint)}-disable {
          flex-wrap: wrap;
          overflow-x: initial;
          -webkit-overflow-scrolling: initial;
          margin-bottom: 0;
        }
      }
    }
  }
}