.vcp-campo-testo__riquadro {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    height: var(--vcp-altezza-48);
    padding: 0 var(--vcp-spazio-14);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-12);
    background: var(--vcp-colore-superficie);
    transition: border-color var(--vcp-durata), box-shadow var(--vcp-durata);
}

.vcp-campo-testo__riquadro:focus-within {
    border-color: var(--vcp-colore-primario);
    box-shadow: var(--vcp-ombra-anello-fuoco);
}

.vcp-campo-testo__controllo {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: var(--vcp-testo-campo);
    color: var(--vcp-colore-testo);
}

.vcp-campo-testo__icona {
    flex: none;
    width: var(--vcp-spazio-16);
    margin-right: var(--vcp-spazio-2);
    font-size: var(--vcp-testo-14);
    text-align: center;
    color: var(--vcp-colore-segnaposto);
}

.vcp-campo-testo__unita {
    flex: none;
    font-size: var(--vcp-testo-13);
    white-space: nowrap;
    color: var(--vcp-colore-testo-secondario);
}

.vcp-campo-testo__valido {
    flex: none;
    font-size: var(--vcp-testo-16);
    color: var(--vcp-colore-successo);
}

.vcp-campo-testo__cancella {
    flex: none;
    width: var(--vcp-altezza-36);
    height: var(--vcp-altezza-36);
    margin-right: calc(-1 * var(--vcp-spazio-6));
    border-radius: var(--vcp-raggio-cerchio);
    color: var(--vcp-colore-segnaposto);
    transition: color var(--vcp-durata-rapida), background-color var(--vcp-durata-rapida);
}

.vcp-campo-testo__cancella:hover {
    background: var(--vcp-colore-superficie-incassata);
    color: var(--vcp-colore-testo-secondario);
}

/* Il margine negativo compensa margine interno e bordo del riquadro: il
   pulsante resta a 6px dal bordo esterno, dove lo mette il mockup. */
.vcp-campo-testo__rivela {
    flex: none;
    width: var(--vcp-altezza-36);
    height: var(--vcp-altezza-36);
    margin-right: calc(var(--vcp-spazio-6) - var(--vcp-spazio-14) - var(--vcp-bordo-sottile));
    border-radius: var(--vcp-raggio-cerchio);
    font-size: var(--vcp-testo-14);
    color: var(--vcp-colore-segnaposto);
    transition: color var(--vcp-durata-rapida), background-color var(--vcp-durata-rapida);
}

.vcp-campo-testo__rivela:hover {
    background: var(--vcp-colore-superficie-incassata);
    color: var(--vcp-colore-testo-secondario);
}

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

.vcp-campo-testo--evidente .vcp-campo-testo__riquadro,
.vcp-campo-testo--titolo .vcp-campo-testo__riquadro {
    height: var(--vcp-altezza-52);
    padding: 0 var(--vcp-spazio-16);
    border-width: var(--vcp-bordo-medio);
    border-radius: var(--vcp-raggio-14);
}

.vcp-campo-testo--titolo .vcp-campo-testo__controllo {
    font-size: var(--vcp-testo-16);
    font-weight: var(--vcp-peso-medio);
}

.vcp-campo-testo--compatta .vcp-campo-testo__riquadro {
    height: var(--vcp-altezza-40);
    padding: 0 var(--vcp-spazio-12);
    border-radius: var(--vcp-raggio-10);
}

.vcp-campo-testo--compatta .vcp-campo-testo__controllo {
    font-size: var(--vcp-testo-13);
}

.vcp-campo-testo--errore .vcp-campo-testo__riquadro {
    border-color: var(--vcp-colore-errore-bordo);
}

.vcp-campo-testo--errore .vcp-campo-testo__riquadro:focus-within {
    box-shadow: var(--vcp-ombra-anello-errore);
}

.vcp-campo-testo--disabilitato .vcp-campo-testo__riquadro {
    background: var(--vcp-colore-superficie-incassata);
}

.vcp-campo-testo--disabilitato .vcp-campo-testo__controllo {
    color: var(--vcp-colore-testo-secondario);
    cursor: not-allowed;
}