:root {
    --drawer-padding:       var(--size-medium);
    --drawer-header-height: 30dvh;
    --drawer-width:         80dvw;
    --drawer-void:          calc(100dvw - var(--drawer-width));
    --drawer-icon-size:     40px; /* beercss large */
    --drawer-icon-color:    var(--on-surface);
    --drawer-icon-margin:   var(--size-small-xs);
}

/* Buttons */
[id*="drawer-button-"] {
    position: absolute;
    z-index:  10;
    margin:   0;

    i {
        color: var(--drawer-icon-color);
    }

    &:after {
        opacity: .1;
    }

    &:hover {

        &:after {
            opacity: .5;
        }
    }

    &#drawer-button-close {
        inset: var(--drawer-icon-margin) 0 auto auto;
    }

    &#drawer-button-back {
        inset: var(--drawer-icon-margin) auto auto calc(var(--drawer-void) + var(--drawer-icon-margin));
    }

    &#drawer-button-wide {
        inset: auto var(--drawer-icon-margin) var(--drawer-icon-margin) auto;
    }
}

#nova-drawer:has(#single-hero) {
    [id*="drawer-button-"] {
        --drawer-icon-color: var(--white);
    }

    &.nova-drawer-wide {
        --drawer-header-height: 50dvh;
        --drawer-width:         95dvw;
        background:             var(--surface);
    }
}

/* Overlay */
[data-nova-drawer] {
    position:        fixed;
    inset:           0;
    display:         flex;
    justify-content: flex-end;
    background:      rgba(var(--white-rgb), .35);
    backdrop-filter: blur(10px);
    opacity:         0;
    pointer-events:  none;
    transition:      all .2s ease;
    z-index:         9999;

    &.nova-drawer-wide {
        --drawer-width: 95dvw;
        --drawer-void:  calc(100dvw - var(--drawer-width));
    }
}

/* Panneau */
#nova-drawer-content {
    width:          min(var(--drawer-width), 100%);
    height:         100%;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    background:     var(--surface-container-lowest, #fff);
    box-shadow:     var(--shadow-large);
    transform:      translateX(100%);
    transition:     transform .3s ease, width .3s ease;

    > [class*="single-section"],
    > [class="archive-page"],
    > [class="menu-post"],
    > [class="contact-post"] {
        padding: calc(var(--drawer-icon-size) + var(--drawer-icon-margin)) 0 0 0; /* place pour les icons back et close */
        width:   100%;
    }

    article {
        flex:           0 1 100%;
        display:        flex;
        flex-direction: column;
        overflow:       hidden;
        padding:        0;
        background:     transparent;
        box-shadow:     none;
        border-radius:  0;
        position:       relative;


    }

    .archive-page,
    article:not(.archive-item):not(.contact-post):not(.booking-post) {

        &:after {
            content:    '';
            position:   absolute;
            inset:      auto 0 0 0;
            display:    block;
            width:      100%;
            height:     calc(var(--section-padding) * 2);
            background: linear-gradient(transparent 0%, var(--background) 100%);
            z-index:    10;
        }
    }
}

/* États ouverts */
[data-nova-drawer].active {
    opacity:        1;
    pointer-events: auto;
}

[data-nova-drawer].active #nova-drawer-content {
    transform: translateX(0);
}

/* Pas de scroll de la page */
html.no-scroll {
    overflow: hidden;
}