/*
 * Stili applicativi Corsi per badge e indicatori non generici.
 * Il badge base e le varianti cromatiche restano in badge.css.
 */

.role-badge {
    min-width: 56px;
}

.level-badge {
    width: 29px;
}

/* Badge del livello scolastico con il nome per esteso: largo quanto il testo. */
.level-badge.level-badge-name {
    width: auto;
}


/*
 * Livelli: ogni fascia ha una tinta, la seconda del livello (A2, B1, C1)
 * e' la variante piu' chiara. A1, B2 e C2 usano le varianti scure di Kerno
 * (badge-green, badge-yellow, badge-red).
 */
.badge-green-light {
    border: 1px solid var(--color-level-green-border);
    background-color: var(--color-level-green);
    background-image: linear-gradient(to bottom, var(--color-level-green-light), var(--color-level-green-dark));
}

.badge-yellow-light {
    border: 1px solid var(--color-level-yellow-border);
    background-color: var(--color-level-yellow);
    background-image: linear-gradient(to bottom, var(--color-level-yellow-light), var(--color-level-yellow-dark));
}

.badge-red-light {
    border: 1px solid var(--color-level-red-border);
    background-color: var(--color-level-red);
    background-image: linear-gradient(to bottom, var(--color-level-red-light), var(--color-level-red-dark));
}

.yesno-badge {
    min-width: 32px;
}

/*
 * Conteggi "3/10" (corsisti accettati sul massimo): tutti larghi quanto
 * "20/20", cosi' i badge della colonna restano allineati. 5ch e' la larghezza
 * di cinque cifre nel carattere del badge, piu' padding (7px per lato) e
 * bordo (1px per lato); la barra e' piu' stretta di una cifra, quindi basta.
 */
.count-badge {
    min-width: calc(5ch + 16px);
}