:root {
  --scrollbar-size: 10px;
  --scrollbar-thumb-color: rgba(23, 36, 48, 0.28);
  --scrollbar-thumb-color-active: rgba(23, 36, 48, 0.42);
}

[data-theme="dark"] {
  --scrollbar-thumb-color: rgba(228, 230, 234, 0.28);
  --scrollbar-thumb-color-active: rgba(228, 230, 234, 0.42);
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

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

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

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

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: transparent;
  transition: background-color 180ms ease;
}

html[data-scrollbar-active="true"],
body[data-scrollbar-active="true"],
[data-scrollbar-active="true"] {
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}

html[data-scrollbar-active="true"]::-webkit-scrollbar-thumb,
body[data-scrollbar-active="true"]::-webkit-scrollbar-thumb,
[data-scrollbar-active="true"]::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
}

html[data-scrollbar-active="true"]::-webkit-scrollbar-thumb:hover,
body[data-scrollbar-active="true"]::-webkit-scrollbar-thumb:hover,
[data-scrollbar-active="true"]::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-color-active);
}