/* Shared by the website and dashboard, including nested scroll containers. */
html {
  scrollbar-gutter: stable;
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted, #64748b) 55%, transparent) transparent;
}

@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

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

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    min-height: 40px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted, #64748b) 55%, transparent);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted, #64748b);
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: var(--teal, #0d9488);
  }
}

@media (forced-colors: active) {
  * { scrollbar-color: auto; scrollbar-width: auto; }
  ::-webkit-scrollbar-thumb { background-color: CanvasText; }
}