/* File: scroll-bars.css
    Description: Custom scrollbar styling matching theme primary color.
*/

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--background);
    border-left: 1px solid var(--border);
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px;
    border: 2px solid var(--background); /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--background);
}

/* Custom Class for hidden scrollbar containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}