/*********************
 * Custom Scrollbars *
 *********************/
@theme {
  --scrollbar-width: auto;
  --scrollbar-size: 14px;
  --scroll-behavior: smooth;
  --scrollbar-thumb-color-light: #c1c1c1;
  --scrollbar-track-color-light: #fafafa;
  --scrollbar-thumb-color-dark: #6b6b6b;
  --scrollbar-track-color-dark: #2d2d2d;
}

@utility scrollbars-on {
  @layer base {
    & {
      @media (prefers-color-scheme: light) {
        --_thumb-fallback-color: var(--scrollbar-thumb-color-light);
        --_track-fallback-color: var(--scrollbar-track-color-light);
      }

      @media (prefers-color-scheme: dark) {
        --_thumb-fallback-color: var(--scrollbar-thumb-color-dark);
        --_track-fallback-color: var(--scrollbar-track-color-dark);
      }
    }

    &,
    * {
      scroll-behavior: var(--scroll-behavior);
      scrollbar-width: var(--scrollbar-width);
      scrollbar-color: var(
          --scrollbar-thumb-color,
          var(--_thumb-fallback-color)
        )
        var(--scrollbar-track-color, var(--_track-fallback-color));

      /* Works on Chrome, Edge, and Safari */
      &::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
      }

      &::-webkit-scrollbar-track {
        background: var(--scrollbar-track-color);
      }

      &::-webkit-scrollbar-thumb {
        border: var(--scrollbar-thumb-radius, 3px) solid
          var(--scrollbar-track-color);
        border-radius: 100px;
        background: var(--scrollbar-thumb-color);
      }
    }
  }
}

@utility scrollbar-auto {
  --scrollbar-width: auto;
  --scrollbar-size: 12px;
}

@utility scrollbar-thin {
  --scrollbar-width: thin;
  --scrollbar-size: 12px;
}

@utility scrollbar-none {
  --scrollbar-width: none;
  --scrollbar-size: 0;
}

/* prettier-ignore */
@utility scrollbar-thumb-* {
  --scrollbar-thumb-color: --value(--color-*, [color]);
  --scrollbar-thumb-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(integer) %
  );
}

/* prettier-ignore */
@utility scrollbar-track-* {
  --scrollbar-track-color: --value(--color-*, [color]);
  --scrollbar-track-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(integer) %
  );
}