.vcp-foglio__velo {
    position: fixed;
    inset: 0;
    z-index: var(--vcp-livello-finestra);
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--vcp-colore-velo-foglio);
    color: inherit;
}

.vcp-foglio__velo[open] {
    display: block;
}

.vcp-foglio__velo::backdrop {
    background: transparent;
}

.vcp-foglio__riquadro {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-14);
    width: 100%;
    max-width: var(--vcp-finestra-larghezza-massima);
    max-height: calc(100vh - var(--vcp-spazio-24));
    max-height: calc(100dvh - var(--vcp-spazio-24));
    margin: 0 auto;
    padding: var(--vcp-spazio-10) var(--vcp-spazio-20) calc(var(--vcp-spazio-28) + env(safe-area-inset-bottom));
    border-radius: var(--vcp-raggio-24) var(--vcp-raggio-24) 0 0;
    background: var(--vcp-colore-superficie);
    box-shadow: var(--vcp-ombra-finestra);
    transform: translateY(var(--vcp-foglio-spostamento, 0));
    transition: transform var(--vcp-durata) var(--vcp-curva-scorrimento);
}

.vcp-foglio--trascinato .vcp-foglio__riquadro {
    transition: none;
}

/* Senza touch-action il browser interpreterebbe il trascinamento come
   scorrimento della pagina e annullerebbe gli eventi del puntatore. */
.vcp-foglio__presa {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--vcp-spazio-10);
    touch-action: none;
    cursor: grab;
}

.vcp-foglio__maniglia {
    align-self: center;
    width: var(--vcp-spazio-40);
    height: var(--vcp-spazio-4);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-bordo-campo);
}

.vcp-foglio__testata {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-12);
    min-height: var(--vcp-altezza-36);
}

.vcp-foglio__titolo {
    flex: 1;
    margin: 0;
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo);
}

.vcp-foglio__chiudi {
    flex: none;
    width: var(--vcp-altezza-36);
    height: var(--vcp-altezza-36);
    margin: 0 calc(-1 * var(--vcp-spazio-8)) 0 auto;
    border-radius: var(--vcp-raggio-cerchio);
    font-size: var(--vcp-testo-16);
    color: var(--vcp-colore-testo-secondario);
    transition: background-color var(--vcp-durata-rapida);
}

.vcp-foglio__chiudi:hover {
    background: var(--vcp-colore-superficie-incassata);
}

.vcp-foglio__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-14);
    min-height: 0;
    overflow: auto;
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-secondario);
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-foglio__velo[open] .vcp-foglio__riquadro {
        animation: vcp-foglio-sale var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
    }

    .vcp-foglio--in-uscita .vcp-foglio__velo[open] {
        animation: vcp-foglio-svanisce var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento) forwards;
    }

    .vcp-foglio--in-uscita .vcp-foglio__velo[open] .vcp-foglio__riquadro {
        animation: vcp-foglio-scende var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento) forwards;
    }

    @keyframes vcp-foglio-sale {
        from {
            transform: translateY(100%);
        }
    }

    @keyframes vcp-foglio-scende {
        to {
            transform: translateY(100%);
        }
    }

    @keyframes vcp-foglio-svanisce {
        to {
            background-color: transparent;
        }
    }
}