/*
 * Custom Scrollbar Utilities
 *
 * Classes:
 *   no-scrollbar           — hide scrollbar while keeping overflow scroll (all browsers)
 *   scrollable-indicator   — gradient fade at top/bottom to indicate scrollable content
 */

/* Tailwind v4 @utility directive (not standard CSS; editor may warn without css.lint.unknownAtRules) */
@utility no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
}

/* Tailwind v4 @utility directive (not standard CSS; editor may warn without css.lint.unknownAtRules) */
@utility scrollable-indicator {
  background:
    linear-gradient(hsl(var(--background)) 30%, hsl(var(--background) / 0)),
    linear-gradient(hsl(var(--background)), hsl(var(--background)) 0%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(farthest-side at 50% 100%, hsl(var(--background-shadow) / 0.1), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: hsl(var(--background));
  background-size:
    100% 60px,
    100% 60px,
    100% 6px,
    100% 6px;
  background-attachment: local, local, scroll, scroll;
}

@layer base {
  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: 5px;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
  }
}
