/* Scrollbar Component - Reusable */
/* Apply to any page by including this file and adding the scrollbar-primary class to html or body */

html.scrollbar-primary {
    scrollbar-color: rgb(14 165 233 / 0.8) rgb(248 250 252 / 0.2);
    scrollbar-width: thin;
}

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

html.scrollbar-primary::-webkit-scrollbar-track {
    background: rgb(248 250 252 / 0.1);
}

html.scrollbar-primary::-webkit-scrollbar-thumb {
    background: rgb(14 165 233 / 0.7);
    border-radius: 5px;
    border: 2px solid rgb(248 250 252 / 0.1);
}

html.scrollbar-primary::-webkit-scrollbar-thumb:hover {
    background: rgb(14 165 233 / 0.9);
}

/* Dark mode support */
html.scrollbar-primary.dark {
    scrollbar-color: rgb(14 165 233 / 0.8) rgb(30 41 59 / 0.2);
}

html.scrollbar-primary.dark::-webkit-scrollbar-track {
    background: rgb(30 41 59 / 0.1);
}

html.scrollbar-primary.dark::-webkit-scrollbar-thumb {
    background: rgb(14 165 233 / 0.7);
    border-color: rgb(30 41 59 / 0.1);
}

html.scrollbar-primary.dark::-webkit-scrollbar-thumb:hover {
    background: rgb(14 165 233 / 0.9);
}