/* OBJEKTO: system-wide scrollbar component */

:root {
  --scrollbar-size: 11px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #9fb9b6;
  --scrollbar-thumb-hover: #4f8f89;
  --scrollbar-thumb-active: #0f766e;
}

html.dark {
  --scrollbar-track: transparent;
  --scrollbar-thumb: #496966;
  --scrollbar-thumb-hover: #6d9691;
  --scrollbar-thumb-active: #5eead4;
}

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

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

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

html::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
  min-width: 42px;
  min-height: 42px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

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

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

html::-webkit-scrollbar-corner,
html *::-webkit-scrollbar-corner {
  background: transparent;
}

@media (pointer: coarse) {
  :root { --scrollbar-size: 8px; }
}

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