:root {
  --scrollbar-thumb: rgb(67 87 67 / 25%);
  --scrollbar-hover: rgb(67 87 67 / 45%);
}

:root[data-theme='dark'] {
  --scrollbar-thumb: rgb(164 196 165 / 38%);
  --scrollbar-hover: rgb(164 196 165 / 65%);
}

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

@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover); }
}

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