@media (prefers-color-scheme: light) {
    html {
        --scroll-bg-color: #dfdfdf;
        --scroll-bg-hover-color: #d1d1d1;
        --scroll-thumb-color: #a0a0a0;
        --scroll-thumb-hover-color: #909090;
        --scroll-thumb-active-color: #808080;
    }
    /* Dark theme colors */
    html.dark-theme {
        --scroll-bg-color: #303030;
        --scroll-bg-hover-color: #3f3f3f;
        --scroll-thumb-color: #5d5d5d;
        --scroll-thumb-hover-color: #6d6d6d;
        --scroll-thumb-active-color: #7e7e7e;
    }
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    html {
        --scroll-bg-color: #303030;
        --scroll-bg-hover-color: #3f3f3f;
        --scroll-thumb-color: #5d5d5d;
        --scroll-thumb-hover-color: #6d6d6d;
        --scroll-thumb-active-color: #7e7e7e;
    }
    /* Override dark mode with light mode styles if the user decides to swap */
    html.light-theme {
        --scroll-bg-color: #dfdfdf;
        --scroll-bg-hover-color: #d1d1d1;
        --scroll-thumb-color: #a0a0a0;
        --scroll-thumb-hover-color: #909090;
        --scroll-thumb-active-color: #808080;
    }
}

::-webkit-scrollbar {
    background-color: var(--scroll-bg-color);
    width: 1.5em;
    height: 1.5em;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 10px;
    border: 3px solid var(--scroll-bg-color);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover-color);
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-thumb-active-color);
}

::-webkit-scrollbar-corner {
    background-color: var(--main-background-color);
}