/* anaglyph scrollbar — black track, blue thumb, red arrows.
 * 3D-glasses metaphor: red lens + blue lens. WebKit + Firefox.
 * Skin-tokenized so any skin can swap the palette. */

/* Firefox — limited control, but at least the colors. */
* {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: auto;
}

/* WebKit / Blink — full control. */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: var(--scroll-track);
}

::-webkit-scrollbar-track {
  background: var(--scroll-track);
  box-shadow: inset 1px 0 0 var(--color-border-subtle);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scroll-thumb) 100%, white 12%) 0%,
    var(--scroll-thumb) 50%,
    color-mix(in srgb, var(--scroll-thumb) 100%, black 30%) 100%
  );
  border: 1px solid color-mix(in srgb, var(--scroll-thumb) 100%, black 40%);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.40);
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--scroll-thumb-hover) 100%, black 15%);
}

/* The arrow buttons — red, with a real pointer arrow drawn in SVG. */
::-webkit-scrollbar-button {
  background: var(--scroll-arrow-bg);
  border: 1px solid color-mix(in srgb, var(--scroll-arrow-bg) 100%, black 40%);
  height: 16px; width: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.40);
}
::-webkit-scrollbar-button:hover { background-color: var(--scroll-arrow-bg-hover); }

/* Up arrow */
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 1 L7 6 L1 6 Z' fill='white'/></svg>");
}
/* Down arrow */
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 7 L7 2 L1 2 Z' fill='white'/></svg>");
}
/* Left arrow */
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 4 L6 1 L6 7 Z' fill='white'/></svg>");
}
/* Right arrow */
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M7 4 L2 1 L2 7 Z' fill='white'/></svg>");
}

::-webkit-scrollbar-corner { background: var(--scroll-track); }