/* Barra de rolagem discreta em todo o site: sem setas, trilho transparente
   (assume a cor do fundo, inclusive a do menu lateral) e polegar cinza
   translúcido, legível tanto no tema claro quanto no escuro. */

/* Chrome / Edge / Safari. Não usar scrollbar-width/scrollbar-color aqui:
   no Chromium eles desativam estas regras e as setas voltam. */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, .45);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, .7);
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Firefox (não tem ::-webkit-scrollbar). */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, .45) transparent;
    }
}

/* O tema Jabuticaba define scrollbar-width na barra lateral; no Chromium isso
   faz as regras ::-webkit-scrollbar acima serem ignoradas nela. Volta ao "auto"
   só onde as regras webkit funcionam, para a lateral seguir o mesmo estilo. */
@supports selector(::-webkit-scrollbar) {
    .sidebar {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
}