/**
 * Scrollbars that follow editor color mode (data-editor-theme on html).
 * Apply class `themed-scrollbar` to overflow containers.
 */

.themed-scrollbar {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--editor-scrollbar-thumb) var(--editor-scrollbar-track);
}

.themed-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.themed-scrollbar::-webkit-scrollbar-track {
  background: var(--editor-scrollbar-track);
  border-radius: 4px;
}

.themed-scrollbar::-webkit-scrollbar-thumb {
  background: var(--editor-scrollbar-thumb);
  border-radius: 4px;
}

.themed-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--editor-scrollbar-thumb-hover);
}

:root,
[data-editor-theme='dark'] {
  --editor-scrollbar-thumb: #475569;
  --editor-scrollbar-thumb-hover: #64748b;
  --editor-scrollbar-track: #0f172a;
}

[data-editor-theme='light'] .themed-scrollbar,
[data-editor-theme='light'] {
  color-scheme: light;
  --editor-scrollbar-thumb: #94a3b8;
  --editor-scrollbar-thumb-hover: #64748b;
  --editor-scrollbar-track: #e2e8f0;
}