:root {
  --scrollbar-track: transparent;
  --scrollbar-thumb: #9ca3af;
  --color-primary: #0ea5e9;
}

[data-mode="dark"] {
  --scrollbar-thumb: var(--color-primary-200);
}

::-webkit-scrollbar {
  width: 0.3rem;
}

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0.3rem;
}

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

::-webkit-scrollbar-button,
::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-button:horizontal,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:horizontal:start,
::-webkit-scrollbar-button:horizontal:end {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}