/* Globalize — Scrollbars Design 1.0.0
 * All scrolling regions: viewport, horizontal containers, lists, menus, overlays.
 * Native scrolling is preserved. No JS, no extra DOM, no forced overflow.
 */

:root {
  --gsb-track: #eef1f5;
  --gsb-thumb: #77869a;
  --gsb-hover: #344256;
  --gsb-size: 12px;
}

/* Standard scrollbars, chiefly Firefox. A browser may choose its native shape. */
@supports (scrollbar-color: auto) {
  html,
  body,
  body * {
    scrollbar-color: var(--gsb-thumb) var(--gsb-track);
    scrollbar-width: thin;
  }
  html:hover,
  body *:hover {
    scrollbar-color: var(--gsb-hover) var(--gsb-track);
  }
}

/* Chromium, Safari, Edge: both orientations, every nested overflow container.
 * Reset the standard CSS properties here to avoid their taking priority over
 * the pill-shaped ::-webkit-scrollbar styling in modern Chromium. */
@supports selector(::-webkit-scrollbar) {
  html,
  body,
  body *,
  html:hover,
  body *:hover {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    width: var(--gsb-size);
    height: var(--gsb-size);
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  body *::-webkit-scrollbar-track {
    background: var(--gsb-track);
    border-radius: 999px;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  body *::-webkit-scrollbar-thumb {
    background-color: var(--gsb-thumb);
    border: 2px solid var(--gsb-track);
    background-clip: padding-box;
    border-radius: 999px;
    min-height: 32px;
    min-width: 32px;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  body *::-webkit-scrollbar-thumb:hover,
  html::-webkit-scrollbar-thumb:active,
  body::-webkit-scrollbar-thumb:active,
  body *::-webkit-scrollbar-thumb:active {
    background-color: var(--gsb-hover);
  }

  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner,
  body *::-webkit-scrollbar-corner {
    background: var(--gsb-track);
  }

  /* Remove native browser arrow blocks where customizable; keep usable track. */
  html::-webkit-scrollbar-button,
  body::-webkit-scrollbar-button,
  body *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

/* High contrast accessibility: respect operating-system color choices. */
@media (forced-colors: active) {
  html,
  body,
  body * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  body *::-webkit-scrollbar-thumb {
    background: ButtonText;
    border-color: Canvas;
  }
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  body *::-webkit-scrollbar-track {
    background: Canvas;
  }
}