/* Global auto-hiding scrollbars: visible only while a container is scrolling. */
:root {
  --theme-scrollbar-size: 5px;
  --theme-scrollbar-inline-size: 4px;
  --theme-scrollbar-track: transparent;
  --theme-scrollbar-thumb: transparent;
  --theme-scrollbar-thumb-scrolling: rgba(15, 23, 42, 0.14);
  --theme-scrollbar-thumb-active: rgba(15, 23, 42, 0.22);
}

[data-theme="dark"] {
  --theme-scrollbar-thumb-scrolling: rgba(255, 255, 255, 0.14);
  --theme-scrollbar-thumb-active: rgba(255, 255, 255, 0.22);
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*.is-scrolling {
  scrollbar-width: thin !important;
  scrollbar-color: var(--theme-scrollbar-thumb-scrolling) transparent !important;
}

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

*.is-scrolling::-webkit-scrollbar {
  display: block !important;
  width: var(--theme-scrollbar-size) !important;
  height: var(--theme-scrollbar-inline-size) !important;
}

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

*::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

*.is-scrolling::-webkit-scrollbar-thumb {
  background-color: var(--theme-scrollbar-thumb-scrolling) !important;
}

*.is-scrolling::-webkit-scrollbar-thumb:active {
  background-color: var(--theme-scrollbar-thumb-active) !important;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

@media (pointer: coarse) {
  *::-webkit-scrollbar {
    width: var(--theme-scrollbar-inline-size);
    height: var(--theme-scrollbar-inline-size);
  }
}