.vcp-interruttore {
    --vcp-interruttore-larghezza-attuale: var(--vcp-interruttore-larghezza);
    --vcp-interruttore-altezza-attuale: var(--vcp-interruttore-altezza);

    display: block;
}

.vcp-interruttore--compatta {
    --vcp-interruttore-larghezza-attuale: var(--vcp-interruttore-larghezza-compatta);
    --vcp-interruttore-altezza-attuale: var(--vcp-interruttore-altezza-compatta);
}

.vcp-interruttore__controllo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vcp-spazio-16);
    width: 100%;
    min-height: var(--vcp-altezza-36);
    border-radius: var(--vcp-raggio-6);
    text-align: left;
}

.vcp-interruttore--sola-traccia .vcp-interruttore__controllo {
    width: auto;
    min-height: 0;
    border-radius: var(--vcp-raggio-pillola);
}

.vcp-interruttore__etichetta {
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-interruttore__traccia {
    position: relative;
    flex: none;
    width: var(--vcp-interruttore-larghezza-attuale);
    height: var(--vcp-interruttore-altezza-attuale);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-bordo-campo);
    transition: background-color var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-interruttore__pomello {
    position: absolute;
    top: var(--vcp-interruttore-margine);
    left: var(--vcp-interruttore-margine);
    width: calc(var(--vcp-interruttore-altezza-attuale) - 2 * var(--vcp-interruttore-margine));
    height: calc(var(--vcp-interruttore-altezza-attuale) - 2 * var(--vcp-interruttore-margine));
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-pomello);
    transition: transform var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-interruttore--attivo .vcp-interruttore__traccia {
    background: var(--vcp-colore-primario);
}

.vcp-interruttore--attivo .vcp-interruttore__pomello {
    transform: translateX(calc(var(--vcp-interruttore-larghezza-attuale) - var(--vcp-interruttore-altezza-attuale)));
}

.vcp-interruttore--disabilitato .vcp-interruttore__controllo {
    opacity: var(--vcp-opacita-disattivato);
}