.vcp-avviso {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--vcp-spazio-10);
    padding: var(--vcp-spazio-12) var(--vcp-spazio-14);
    border: var(--vcp-bordo-sottile) solid transparent;
    border-radius: var(--vcp-raggio-12);
    background: var(--vcp-colore-superficie-incassata);
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-avviso__icona {
    flex: none;
    margin-top: var(--vcp-spazio-3);
    line-height: 1;
    color: var(--vcp-colore-primario);
}

.vcp-avviso__contenuto {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    gap: var(--vcp-spazio-2);
    min-width: 0;
}

.vcp-avviso__titolo {
    font-weight: var(--vcp-peso-semigrassetto);
}

.vcp-avviso__testo {
    text-wrap: pretty;
}

.vcp-avviso__azione {
    flex: none;
    align-self: center;
    height: var(--vcp-altezza-38);
    padding: 0 var(--vcp-spazio-16);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-primario-tratteggio);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-superficie);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-primario);
    transition: border-color var(--vcp-durata-rapida);
}

.vcp-avviso__azione:hover {
    border-color: currentColor;
}

.vcp-avviso--avviso {
    padding: var(--vcp-spazio-10) var(--vcp-spazio-12);
    border-color: var(--vcp-colore-avviso-bordo);
    background: var(--vcp-colore-avviso-sfondo);
    color: var(--vcp-colore-avviso-testo);
}

.vcp-avviso--avviso .vcp-avviso__icona {
    color: var(--vcp-colore-avviso);
}

.vcp-avviso--avviso .vcp-avviso__azione {
    border-color: var(--vcp-colore-avviso-bordo);
    color: var(--vcp-colore-avviso-testo);
}

.vcp-avviso--errore {
    align-items: center;
    gap: var(--vcp-spazio-10) var(--vcp-spazio-14);
    border-color: var(--vcp-colore-errore-bordo-tenue);
    border-radius: var(--vcp-raggio-14);
    background: var(--vcp-colore-errore-sfondo);
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-errore-testo-forte);
}

.vcp-avviso--errore .vcp-avviso__icona {
    margin-top: 0;
    font-size: var(--vcp-testo-16);
    color: var(--vcp-colore-errore);
}

.vcp-avviso--errore .vcp-avviso__titolo {
    font-size: var(--vcp-testo-14);
}

.vcp-avviso--errore .vcp-avviso__azione {
    border-color: var(--vcp-colore-errore-bordo);
    color: var(--vcp-colore-errore);
}

.vcp-avviso--successo {
    background: var(--vcp-colore-successo-sfondo);
    color: var(--vcp-colore-testo);
}

.vcp-avviso--successo .vcp-avviso__icona,
.vcp-avviso--successo .vcp-avviso__azione {
    color: var(--vcp-colore-successo);
}

.vcp-avviso--ai {
    border-color: var(--vcp-colore-ai-bordo);
    background: var(--vcp-colore-ai-superficie);
}

.vcp-avviso--ai .vcp-avviso__icona,
.vcp-avviso--ai .vcp-avviso__titolo,
.vcp-avviso--ai .vcp-avviso__azione {
    color: var(--vcp-colore-ai);
}

.vcp-avviso--ai .vcp-avviso__azione {
    border-color: var(--vcp-colore-ai-bordo);
}