.vcp-barra-avanzamento {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vcp-spazio-8) var(--vcp-spazio-12);
    font-size: var(--vcp-testo-12);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-barra-avanzamento__etichetta {
    grid-row: 1;
    grid-column: 1;
}

.vcp-barra-avanzamento__testo {
    grid-row: 1;
    grid-column: 2;
    color: var(--vcp-colore-primario);
}

.vcp-barra-avanzamento__traccia {
    grid-row: 2;
    grid-column: 1 / -1;
    height: var(--vcp-spazio-6);
    overflow: hidden;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-traccia-avanzamento);
}

.vcp-barra-avanzamento__riempimento {
    display: block;
    height: 100%;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    transition:
        width var(--vcp-durata-lenta),
        background-color var(--vcp-durata);
}

.vcp-barra-avanzamento--segmentata {
    display: block;
}

.vcp-barra-avanzamento--segmentata .vcp-barra-avanzamento__traccia {
    display: flex;
    gap: var(--vcp-spazio-3);
    height: var(--vcp-spazio-4);
    overflow: visible;
    border-radius: 0;
    background: none;
}

.vcp-barra-avanzamento__segmento {
    flex: 1;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-segmento-vuoto);
    transition: background-color var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-barra-avanzamento__segmento--pieno {
    background: var(--vcp-colore-primario);
}

.vcp-barra-avanzamento--mini {
    display: flex;
    gap: var(--vcp-spazio-10);
}

.vcp-barra-avanzamento--mini .vcp-barra-avanzamento__traccia {
    flex: none;
    width: var(--vcp-avanzamento-mini-larghezza);
}

.vcp-barra-avanzamento--mini .vcp-barra-avanzamento__testo {
    white-space: nowrap;
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-barra-avanzamento--mini.vcp-barra-avanzamento--completa .vcp-barra-avanzamento__riempimento {
    background: var(--vcp-colore-successo);
}