.vcp-segmenti__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vcp-spazio-8) var(--vcp-spazio-16);
    min-height: var(--vcp-altezza-44);
}

.vcp-segmenti__traccia {
    position: relative;
    display: flex;
    gap: var(--vcp-spazio-2);
    max-width: 100%;
    padding: var(--vcp-spazio-3);
    overflow: auto;
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-traccia);
}

.vcp-segmenti__cursore {
    position: absolute;
    top: var(--vcp-spazio-3);
    left: 0;
    height: var(--vcp-altezza-38);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    box-shadow: var(--vcp-ombra-selezione);
    pointer-events: none;
}

.vcp-segmenti__cursore--animato {
    transition:
        transform var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento),
        width var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-segmenti__opzione {
    position: relative;
    flex: none;
    height: var(--vcp-altezza-38);
    padding: 0 var(--vcp-spazio-16);
    border-radius: var(--vcp-raggio-pillola);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    white-space: nowrap;
    color: var(--vcp-colore-testo-etichetta);
    transition: color var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

/* La traccia scorre in orizzontale e taglierebbe un contorno esterno: quello del
   fuoco resta entro i 3px di margine interno e usa il colore del testo, che si
   distingue anche accanto al segmento scelto. */
.vcp-segmenti__opzione:focus-visible {
    outline-color: var(--vcp-colore-testo);
    outline-offset: 0;
}

.vcp-segmenti__opzione--scelta {
    color: var(--vcp-colore-su-primario);
}

.vcp-segmenti__opzione:disabled {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-segmenti--disabilitato .vcp-segmenti__cursore {
    opacity: var(--vcp-opacita-disattivato);
}

.vcp-segmenti--errore .vcp-segmenti__traccia {
    outline: var(--vcp-bordo-medio) solid var(--vcp-colore-errore-bordo);
}