.vcp-stato-salvataggio {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-10);
    padding: var(--vcp-spazio-16);
    border-radius: var(--vcp-raggio-16);
    background: var(--vcp-colore-superficie-incassata);
    color: var(--vcp-colore-successo);
}

.vcp-stato-salvataggio--salvataggio {
    color: var(--vcp-colore-testo-secondario);
}

.vcp-stato-salvataggio--non-salvato {
    color: var(--vcp-colore-avviso);
}

.vcp-stato-salvataggio--errore {
    color: var(--vcp-colore-errore);
}

.vcp-stato-salvataggio--compatta {
    position: relative;
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
}

.vcp-stato-salvataggio__stato {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
}

.vcp-stato-salvataggio__icona {
    flex: none;
    display: inline-grid;
    place-items: center;
}

.vcp-stato-salvataggio__descrizione {
    margin: 0;
    font-size: var(--vcp-testo-12);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-secondario);
    text-wrap: pretty;
}

.vcp-stato-salvataggio__azione {
    align-self: flex-start;
    border-radius: var(--vcp-raggio-6);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-semigrassetto);
    text-align: left;
    color: var(--vcp-colore-primario);
}

.vcp-stato-salvataggio__azione:hover {
    color: var(--vcp-colore-primario-attivo);
}

.vcp-stato-salvataggio__azione i {
    margin-left: var(--vcp-spazio-6);
    font-size: var(--vcp-testo-11);
}

.vcp-stato-salvataggio__apri {
    display: grid;
    place-items: center;
    width: var(--vcp-altezza-44);
    height: var(--vcp-altezza-44);
    border-radius: var(--vcp-raggio-cerchio);
    font-size: var(--vcp-testo-17);
    color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-stato-salvataggio--salvataggio .vcp-stato-salvataggio__icona {
        animation: vcp-stato-salvataggio-gira var(--vcp-durata-pulsazione) linear infinite;
    }

    @keyframes vcp-stato-salvataggio-gira {
        to {
            transform: rotate(360deg);
        }
    }
}