:root {
    color-scheme: light dark;
}

/* Global */
* {
    scrollbar-width: thin; /* Firefox */
}

html {
    zoom: 0.9;
}

/* Light theme */
html:not(.dark) * {
    scrollbar-color: #6366f1 #f4f4f5;
}

html:not(.dark) *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:not(.dark) *::-webkit-scrollbar-track {
    background: #f4f4f5;
}

html:not(.dark) *::-webkit-scrollbar-thumb {
    background-color: #6366f1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Dark theme */
html.dark * {
    scrollbar-color: #6366f1 #18181b;
}

html.dark *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark *::-webkit-scrollbar-track {
    background: #18181b;
}

html.dark *::-webkit-scrollbar-thumb {
    background-color: #6366f1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Remove arrows (WebKit) */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

*::-webkit-scrollbar-button {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

*::-webkit-scrollbar-button:single-button {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

.no-scrollbar {
    scrollbar-width: none; /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Edge/Safari */
}

/* Hide main page scrollbar while keeping scroll */
html,
body {
    scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome/Edge/Safari */
}