.vcp-zona-caricamento {
    display: block;
}

.vcp-zona-caricamento__riquadro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vcp-spazio-12) var(--vcp-spazio-16);
    padding: var(--vcp-spazio-14);
    border: var(--vcp-bordo-medio) dashed var(--vcp-colore-primario-tratteggio);
    border-radius: var(--vcp-raggio-16);
    background: var(--vcp-colore-superficie-riquadro);
    transition:
        border-color var(--vcp-durata-rapida),
        background-color var(--vcp-durata-rapida),
        box-shadow var(--vcp-durata-rapida);
}

.vcp-zona-caricamento__tessera {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--vcp-altezza-48);
    height: var(--vcp-altezza-48);
    border-radius: var(--vcp-raggio-14);
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-icona-media);
    font-size: var(--vcp-testo-19);
    color: var(--vcp-colore-primario);
}

.vcp-zona-caricamento__testi {
    display: flex;
    flex: 1 1 calc(var(--vcp-spazio-48) * 4);
    flex-direction: column;
    gap: var(--vcp-spazio-2);
    min-width: 0;
}

.vcp-zona-caricamento__titolo {
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-testo);
}

.vcp-zona-caricamento__sottotitolo {
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
}

.vcp-zona-caricamento__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vcp-spazio-8);
}

.vcp-zona-caricamento__azione {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-18);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-primario);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-primario);
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-su-primario);
    transition: background-color var(--vcp-durata-rapida), border-color var(--vcp-durata-rapida);
}

.vcp-zona-caricamento__azione:hover:enabled {
    border-color: var(--vcp-colore-primario-attivo);
    background: var(--vcp-colore-primario-attivo);
}

.vcp-zona-caricamento__azione--secondaria {
    background: var(--vcp-colore-superficie);
    color: var(--vcp-colore-primario);
}

.vcp-zona-caricamento__azione--secondaria:hover:enabled {
    border-color: var(--vcp-colore-primario);
    background: var(--vcp-colore-primario-tenue);
}

.vcp-zona-caricamento__azione:disabled {
    border-color: var(--vcp-colore-bordo-campo);
    background: var(--vcp-colore-superficie);
    color: var(--vcp-colore-disattivato);
}

.vcp-zona-caricamento__nota {
    flex-basis: 100%;
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-segnaposto);
}

.vcp-zona-caricamento--sopra .vcp-zona-caricamento__riquadro {
    border-style: solid;
    border-color: var(--vcp-colore-primario);
    background: var(--vcp-colore-primario-velato);
    box-shadow: var(--vcp-ombra-anello-fuoco);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__riquadro {
    flex-direction: column;
    gap: var(--vcp-spazio-14);
    padding: var(--vcp-spazio-32) var(--vcp-spazio-20);
    text-align: center;
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__tessera {
    width: var(--vcp-altezza-60);
    height: var(--vcp-altezza-60);
    border-radius: var(--vcp-raggio-18);
    box-shadow: var(--vcp-ombra-icona-grande);
    font-size: var(--vcp-testo-24);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__testi {
    flex: none;
    gap: var(--vcp-spazio-4);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__titolo {
    font-size: var(--vcp-testo-16);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__sottotitolo {
    font-size: var(--vcp-testo-13);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__azioni {
    justify-content: center;
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__azione {
    height: var(--vcp-altezza-48);
    padding: 0 var(--vcp-spazio-24);
}

.vcp-zona-caricamento--grande .vcp-zona-caricamento__nota {
    flex-basis: auto;
}

@media (min-width: 860px) {
    .vcp-zona-caricamento__riquadro {
        padding: var(--vcp-spazio-18) var(--vcp-spazio-20);
    }

    .vcp-zona-caricamento--grande .vcp-zona-caricamento__riquadro {
        padding: var(--vcp-spazio-32) var(--vcp-spazio-20);
    }
}