/*--------------------------------------------------------------------------*\
    Header menu wrapper (that will be opaque on small devices an contains <ul>)
\*--------------------------------------------------------------------------*/

.header__menu-wrapper {
    /*box*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height:0;
    z-index: 1;
    /* To go over the page but under the burger-label */
}

/*--------------------------------------------------------------------------*\
        If header only
\*--------------------------------------------------------------------------*/

.burger-input--menu-top-position-header~.header>.header__nav>.header__menu-wrapper{
    /*box*/
    height: -webkit-calc(100% - var(--header-height));
    height: calc(100% - var(--header-height));
    top:var(--header-height) !important;
}

/*--------------------------------------------------------------------------*\
        If topbar only
\*--------------------------------------------------------------------------*/

.burger-input--menu-top-position-topbar~.header>.header__nav>.header__menu-wrapper{
    /*box*/
    height: -webkit-calc(100% - var(--topbar-height));
    height: calc(100% - var(--topbar-height));
    top:var(--topbar-height) !important;
}

/*--------------------------------------------------------------------------*\
        If header + topbar
\*--------------------------------------------------------------------------*/

.burger-input--menu-top-position-header-topbar~.header>.header__nav>.header__menu-wrapper{
    /*box*/
    height: -webkit-calc(100% - var(--header-height) - var(--topbar-height));
    height: calc(100% - var(--header-height) - var(--topbar-height));
    top:calc(var(--header-height) + var(--topbar-height)) !important;
}

/*--------------------------------------------------------------------------*\
        If sidebar
\*--------------------------------------------------------------------------*/

.burger-input--sidebar~.header>.header__nav>.header__menu-wrapper{
    /*box*/
    display:none;
}

@media (min-width:900px) {

    .burger-input--900~.header>.header__nav>.header__menu-wrapper {
        /*box*/
        position: relative !important;
        display:block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: 100% !important;
        width: auto !important;

        /*transform*/
        -webkit-transform: translateX(0px) !important;
        transform: translateX(0px) !important;
    }

}

@media (min-width:700px) {

    .burger-input--700~.header>.header__nav>.header__menu-wrapper {
        /*box*/
        position: relative !important;
        display:block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: 100% !important;
        width: auto !important;

        /*transform*/
        -webkit-transform: translateX(0px) !important;
        transform: translateX(0px) !important;
    }

}

@media (min-width:500px) {

    .burger-input--500~.header>.header__nav>.header__menu-wrapper {
        /*box*/
        position: relative !important;
        display:block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: 100% !important;
        width: auto !important;

        /*transform*/
        -webkit-transform: translateX(0px) !important;
        transform: translateX(0px) !important;
    }

}

/*--------------------------------------------------------------------------*\
    Small devices
\*--------------------------------------------------------------------------*/

.burger-input--header:checked~.header>.header__nav>.header__menu-wrapper {
    /*background*/
    background-color: var(--c-opaque-1);

    /*transform*/
    -webkit-transform: translateX(0px);
    transform: translateX(0px);

    /*transition*/
    /* managed here and not in  header__menu-wrapper class to ensure a good visual effect*/
    -webkit-transition: -webkit-transform 0.5s, background-color 0.5s 0.4s;
    transition: transform 0.5s, background-color 0.5s 0.4s;
}

.burger-input:not(:checked)~.header>.header__nav>.header__menu-wrapper {
    /*background*/
    background-color: transparent;

    /*transform*/
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

    /*transition*/
    /* managed here and not in  header__menu-wrapper class to ensure a good visual effect*/
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}