/* App-wide scrollbar theme.
 *
 * Without this, Chromium paints its default light scrollbar on every scroll
 * region (week/goal tabs, panels, menus) — a white bar against the app's dark
 * surfaces. The thumb is tinted with --overlay-rgb, which display_settings.js
 * flips (white on dark themes, dark slate on light), so one rule set reads
 * correctly in BOTH themes; the track stays transparent so whatever surface is
 * behind it shows through.
 *
 * Chromium/WebKit take the ::-webkit-scrollbar rules. Firefox has no such
 * pseudo-elements, so it gets the standard properties instead — kept behind
 * @supports because Chromium ignores ::-webkit-scrollbar styling on any element
 * that also sets scrollbar-width/scrollbar-color, which would silently undo
 * everything below.
 */

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

*::-webkit-scrollbar-thumb {
  background: rgba(var(--overlay-rgb), 0.16);
  border-radius: 999px;
  /* Transparent border + padding-box clip insets the thumb inside the track,
     so it reads as a floating pill rather than a full-width slab. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--overlay-rgb), 0.26);
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: rgba(var(--overlay-rgb), 0.34);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Where a vertical and a horizontal bar meet — defaults to an opaque light
   square that would show as a white notch in the corner. */
*::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--overlay-rgb), 0.22) transparent;
  }
}