:root {
  --app-scrollbar-size: 8px;
  --app-scrollbar-track: rgba(0, 0, 0, 0);
  --app-scrollbar-thumb: rgba(0, 0, 0, 0.22);
  --app-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] {
  --app-scrollbar-track: rgba(255, 255, 255, 0);
  --app-scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --app-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

/* Chromium / Safari / Edge */
*::-webkit-scrollbar {
  width: var(--app-scrollbar-size);
  height: var(--app-scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

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

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