.vcp-fisarmonica {
    display: block;
    border-top: var(--vcp-bordo-sottile) solid var(--vcp-colore-separatore);
    border-bottom: var(--vcp-bordo-sottile) solid var(--vcp-colore-separatore);
}

.vcp-fisarmonica + .vcp-fisarmonica {
    border-top: 0;
}

.vcp-fisarmonica__testata {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-10);
    width: 100%;
    min-height: var(--vcp-altezza-52);
    padding: 0 var(--vcp-spazio-2);
    border-radius: var(--vcp-raggio-6);
    text-align: left;
    color: var(--vcp-colore-testo);
}

.vcp-fisarmonica__icona {
    flex: none;
    color: var(--vcp-colore-primario);
}

.vcp-fisarmonica__etichetta {
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-semigrassetto);
}

.vcp-fisarmonica__conteggio {
    flex: none;
    font-size: var(--vcp-testo-12);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-primario);
}

.vcp-fisarmonica__freccia {
    flex: none;
    display: inline-grid;
    margin-left: auto;
    font-size: var(--vcp-testo-12);
    color: var(--vcp-colore-testo-secondario);
    transition: transform var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-fisarmonica--aperta .vcp-fisarmonica__freccia {
    transform: rotate(180deg);
}

/* L'altezza si anima passando la riga della griglia da 0fr a 1fr: nessuna
   misura da codice, quindi nessun salto se il contenuto cambia mentre è aperta. */
.vcp-fisarmonica__pannello {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-fisarmonica--aperta .vcp-fisarmonica__pannello {
    grid-template-rows: 1fr;
}

/* Il ritaglio serve all'animazione ma taglierebbe anche il contorno del fuoco
   dei controlli ai bordi: il margine interno, compensato da quello esterno
   negativo, gli lascia spazio senza spostare il contenuto. */
.vcp-fisarmonica__ritaglio {
    min-height: 0;
    margin: 0 calc(-1 * var(--vcp-spazio-4));
    padding: 0 var(--vcp-spazio-4);
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--vcp-durata-scorrimento);
}

.vcp-fisarmonica--aperta .vcp-fisarmonica__ritaglio {
    visibility: visible;
    transition-delay: 0s;
}

.vcp-fisarmonica__contenuto {
    padding: var(--vcp-spazio-4) 0 var(--vcp-spazio-16);
}