.vcp-prezzo__importo {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-8);
}

.vcp-prezzo__spese {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vcp-spazio-10);
}

.vcp-prezzo__campo-spese {
    align-self: stretch;
}

.vcp-prezzo__spese--nessuna .vcp-campo-prezzo__riquadro {
    background: var(--vcp-colore-superficie-incassata);
}

.vcp-prezzo__nessuna-spesa {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--vcp-spazio-8);
    height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-16);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo-campo);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-medio);
    color: var(--vcp-colore-testo-etichetta);
    transition: background-color var(--vcp-durata-rapida), border-color var(--vcp-durata-rapida), color var(--vcp-durata-rapida);
}

.vcp-prezzo__nessuna-spesa-icona {
    display: flex;
    font-size: var(--vcp-testo-11);
}

@media (hover: hover) {
    .vcp-prezzo__nessuna-spesa:hover {
        border-color: var(--vcp-colore-primario);
    }
}

.vcp-prezzo__nessuna-spesa--attiva {
    border-color: var(--vcp-colore-primario);
    background: var(--vcp-colore-primario);
    color: var(--vcp-colore-su-primario);
}

@media (min-width: 576px) {
    .vcp-prezzo__spese {
        flex-direction: row;
    }

    .vcp-prezzo__campo-spese {
        flex: 1 1 0;
        align-self: auto;
    }

    /* La pillola si allinea al riquadro dell'importo, che sta sotto l'etichetta del campo:
       scende dell'altezza dell'etichetta, dello spazio che la separa dal riquadro e di metà
       della differenza tra le due altezze. */
    .vcp-prezzo__nessuna-spesa {
        margin-top: calc(var(--vcp-testo-13) * var(--vcp-interlinea) + var(--vcp-spazio-8) + var(--vcp-spazio-4));
    }
}