:root {
    color-scheme: light;
    scrollbar-color: var(--primary) var(--surface);
    scrollbar-width: thin;
}

[data-theme="dark"] {
    color-scheme: dark;
    scrollbar-color: var(--primary) var(--surface);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

*::-webkit-scrollbar-thumb {
    min-height: 36px;
    background: var(--primary);
    border: 3px solid var(--surface);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

*::-webkit-scrollbar-corner {
    background: var(--surface);
}