/*
    Barra di scorrimento visibile.

    Il tema del portale azzera la larghezza di TUTTE le barre di scorrimento
    (`body *::-webkit-scrollbar { width: 0rem }` in assets/css/styles.css): nei pannelli con il
    contenuto piu' alto dello spazio disponibile si scorre con la rotella, ma non si vede niente
    e non si capisce che sotto c'e' altro. Chi ha bisogno di mostrarla aggiunge questa classe
    all'elemento che scorre, invece di riscriversi le regole del browser pagina per pagina.

    Vale sia per Firefox (`scrollbar-width`/`scrollbar-color`) sia per i browser WebKit.
*/
.scroll-visibile {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c5cad6 transparent;
}

.scroll-visibile::-webkit-scrollbar {
    /* La larghezza va ridichiarata: quella del tema e' zero. */
    width: 10px;
}

.scroll-visibile::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-visibile::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5cad6, #aab1c4);
    border-radius: 999px;
    /* Il bordo trasparente con background-clip lascia aria intorno al cursore. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

.scroll-visibile::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8b95b3, #6c79a1);
    border: 2px solid transparent;
    background-clip: padding-box;
}