/* ============================================================
   SCROLLBAR
   ------------------------------------------------------------
   Opt-in. Add .ice-scrollbar to any element that scrolls.

       .ice-scrollbar          base, 6px
       .ice-scrollbar--s       4px
       .ice-scrollbar--l       8px
       .ice-scrollbar--none    scrolls, but no visible bar
       .ice-scrollbar--hover   invisible until the pointer is inside
                               (pair with .ice-scrollbar)
       .ice-scrollbar--inset   held clear of a rounded corner

   INSIDE A ROUNDED PANEL
   ----------------------
   The bar is laid out against the border box, so in a panel with a
   20px radius the thumb runs straight into the curve at both ends
   and pokes out of the shape. Padding does not help — the bar sits
   outside the padding box. A margin on the TRACK does: --sb-inset
   holds the track clear of the corner. Set it to the panel's own
   radius; --inset is the common case, 20px.

   States:
       rest    a quiet thumb
       active  fully coloured, while the pointer is inside the area

   WHY THE COLOUR CHANGES RATHER THAN THE OPACITY
   ----------------------------------------------
   `opacity` on ::-webkit-scrollbar-thumb is unreliable — the pseudo
   element is rendered outside the normal compositing path. So both
   states are separate gradients, held as surface tokens.

   WHY THERE IS JAVASCRIPT FOR --hover
   -----------------------------------
   WebKit does not repaint ::-webkit-scrollbar-thumb when the parent's
   :hover flips because the cursor moved over *content* — only when the
   cursor is over the bar itself. js/scrollbar.js adds `.is-hovered`
   on pointer enter, which does trigger a repaint. Everything else
   here is pure CSS.
   ============================================================ */

.ice-scrollbar    { --sb-size: var(--space-6); --sb-inset: 0; }
.ice-scrollbar--s { --sb-size: var(--space-4); }
.ice-scrollbar--l { --sb-size: var(--space-8); }

.ice-scrollbar--inset { --sb-inset: var(--radius-20); }

/* ---------- WebKit — Chrome, Safari, Edge ----------------- */

.ice-scrollbar::-webkit-scrollbar {
  inline-size: var(--sb-size);
  block-size:  var(--sb-size);
}

.ice-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  margin-block:  var(--sb-inset);
  margin-inline: var(--sb-inset);
}

.ice-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

.ice-scrollbar:hover::-webkit-scrollbar-thumb,
.ice-scrollbar.is-hovered::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-active);
}

/* The corner where a vertical and a horizontal bar meet. */
.ice-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Hidden ---------------------------------------- */

.ice-scrollbar--none::-webkit-scrollbar { display: none; }
.ice-scrollbar--none { scrollbar-width: none; }

/* ---------- Hover-only ------------------------------------ */

.ice-scrollbar.ice-scrollbar--hover::-webkit-scrollbar-thumb {
  background: transparent;
}

.ice-scrollbar.ice-scrollbar--hover.is-hovered::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-active);
}

/* ---------- Firefox --------------------------------------- */
/* No gradients and no pseudo-elements: a flat colour and a coarse
   width are all that is available. */

@supports not selector(::-webkit-scrollbar) {
  .ice-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thin) transparent;
  }
  .ice-scrollbar--none { scrollbar-width: none; }
  .ice-scrollbar--hover { scrollbar-color: transparent transparent; }
  .ice-scrollbar--hover.is-hovered { scrollbar-color: var(--scrollbar-thin) transparent; }
}