/* Awesome Bears shared scrollbar material.
   Keep this loaded on every first-party page and dialog. */
:root {
  --ab-scrollbar-size: 10px;
  --ab-scrollbar-track: color-mix(in srgb, var(--accent, #73587b) 7%, transparent);
  --ab-scrollbar-thumb: color-mix(in srgb, var(--accent, #73587b) 46%, transparent);
  --ab-scrollbar-thumb-hover: color-mix(in srgb, var(--accent, #73587b) 68%, transparent);
  --ab-scrollbar-thumb-active: color-mix(in srgb, var(--accent, #73587b) 82%, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ab-scrollbar-thumb) var(--ab-scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--ab-scrollbar-size);
  height: var(--ab-scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--ab-scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--ab-scrollbar-thumb);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 18%, transparent);
}

*::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background: var(--ab-scrollbar-thumb-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--ab-scrollbar-thumb-active);
  background-clip: padding-box;
}

*::-webkit-scrollbar-button { display: none; }
*::-webkit-scrollbar-corner { background: transparent; }

html.pitch-dark,
html[data-theme="dark"],
html[data-color-scheme="dark"] {
  --ab-scrollbar-track: rgba(255, 255, 255, .045);
  --ab-scrollbar-thumb: rgba(222, 207, 227, .42);
  --ab-scrollbar-thumb-hover: rgba(235, 223, 239, .64);
  --ab-scrollbar-thumb-active: rgba(244, 235, 247, .78);
}

@media (prefers-contrast: more) {
  :root { --ab-scrollbar-thumb: color-mix(in srgb, var(--accent, #73587b) 78%, transparent); }
}

@media (forced-colors: active) {
  * { scrollbar-color: auto; }
}