/* Strix token layer 7/7 — scrollbar utilities.
 * Generated by scripts/build-tokens.mjs from scripts/tokens/upstream-snapshot.css.
 * Do not edit by hand — change the generator or the snapshot. `pnpm tokens:check` gates this.
 *
 * Utilities rather than a component, because a scrollbar belongs to whichever element
 * scrolls and Strix cannot know which that is. `ChatLog` holds its own scroll root --
 * one element is simultaneously the forwarded ref, the `role="log"` live region and the
 * thing whose scroll metrics are written -- so nothing can wrap it, and a class merged
 * through `cn()` reaches it where a wrapper cannot.
 *
 * `@utility` and not an arbitrary pair: `[scrollbar-width:none]
 * [&::-webkit-scrollbar]:hidden` was written by hand in `tabs.tsx` and independently
 * again by the first real consumer, whose own note reached for a `ScrollArea` this
 * package does not ship. Two authors deriving the same declarations is a missing
 * utility, and `no-arbitrary-tailwind` leaves both alone because neither carries a
 * colour or a length.
 *
 * NEITHER NAME SHADOWS A BUILT-IN. Tailwind 4.3 already ships `scrollbar-thin`,
 * `scrollbar-none` and `scrollbar-thumb-*`, all of which set only the two standard
 * properties. An earlier draft called the first of these `scrollbar-thin` and emitted a
 * second rule with the same selector, which Tailwind then re-declared later in the sheet
 * -- the built-in won on `scrollbar-width` and tailwind-merge resolved the pair by its own
 * group. Both are registered into that group (`scrollbar-w` in `cn.ts`), so all four
 * mutually exclude.
 */

/*
 * Figma's own scrollbar, ported as appearance rather than as geometry. It draws an 8x98px
 * `gray-700` bar at `radius/50` on the Transcript (22:27958); the binding declined it because a
 * fixed-height thumb at a fixed offset cannot track content, which is true of the bar and not of
 * its colour, width and radius.
 *
 * The 8px is the part no built-in can express: `scrollbar-width` takes only `thin`, which is a
 * hint the platform sizes, so the pseudo-element is what pins Figma's number. `thin` is still
 * declared for Firefox, which implements no pseudo-element -- under rule 2 that is where the
 * derivation stops rather than being faked with a wrapper.
 *
 * The track stays transparent so the panel fill shows through, as Figma draws it: the bar sits on
 * the panel with nothing behind it.
 */
@utility scrollbar-pill {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-scrollbar-thumb) transparent;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

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

  &::-webkit-scrollbar-thumb {
    background: var(--color-surface-scrollbar-thumb);
    border-radius: var(--radius-2x-large);
  }
}

/*
 * For a scroller whose affordance is drawn elsewhere -- `Tabs`, where the tabs themselves are the
 * affordance and a bar under them reads as a second control. It removes a visible affordance, so
 * it is opt-in and never a default.
 *
 * Not Tailwind's `scrollbar-none`, which sets the standard property alone: Safari shipped
 * `scrollbar-width` only in 18.2, so on anything older the bar stays drawn and the layout it
 * eats stays eaten. The pseudo-element is the half that works everywhere.
 */
@utility scrollbar-hidden {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}