:root {
    --scrollbar-track: #f0f0f0; /* Modo claro */
    --scrollbar-thumb: #b3b3b3;
    --scrollbar-thumb-hover: #a0a0a0;
}

.dark-mode {
    --scrollbar-track: #131313; /* Modo escuro */
    --scrollbar-thumb: #2e2e2e;
    --scrollbar-thumb-hover: #3a3a3a;
}

/* Estilos para WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Largura da scrollbar */
}

    
::-webkit-scrollbar-track {
    background: var(--scrollbar-track); /* Cor do fundo da track */
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb); /* Cor do "polegar" */
    border-radius: 5px; /* Raio dos cantos do "polegar" */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover); /* Cor do "polegar" ao passar o mouse */
}

/* Estilos para Firefox */
* { /* Aplica a todos os elementos que podem ter scrollbar */
    scrollbar-width: thin; /* Largura da scrollbar (thin, auto, thick) */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Cor do "polegar" e da track */
}

/* Estilos para outros navegadores (e para consistência) -  Não são totalmente suportados, mas ajudam na aparência geral */
::-webkit-scrollbar-corner { /* Cor do canto onde as scrollbars se encontram (se houver) */
    background: var(--scrollbar-track);
}

/* Opcional: Estilizar a barra de rolagem vertical do corpo da página */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

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

body { /* Para Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}