/* ==========================================================================
   GLOBAL SCROLLBAR STYLING (Tegenovergestelde kleur van achtergrond)
   ========================================================================== */
/* Voor Firefox: thumb (var(--primary)) en track (var(--background)) */
html {
    scrollbar-color: var(--primary) var(--background);
    scrollbar-width: auto;
}

/* Voor Chrome, Edge, Safari en Opera */
::-webkit-scrollbar {
    width: 12px; /* Breedte van de scrollbar */
    height: 12px; /* Hoogte voor horizontale scrollbar */
}

/* De achtergrond van de scrollbar (gelijk aan pagina achtergrond) */
::-webkit-scrollbar-track {
    background: var(--background);
}

/* De scrollbar 'thumb' (het bewegende balkje - tegenovergestelde kleur) */
::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 6px;
    border: 3px solid var(--background); /* Creëert een mooie padding rondom de thumb */
}

/* Hover effect op de balk voor betere UX */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}