/*--------------------------------------------------------------------------*\
    Container of burger lines
\*--------------------------------------------------------------------------*/

.burger-label {
    /*box*/
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    height: var(--header-height);
    width: var(--header-height);
    cursor: pointer;
    z-index: 12;

    /*transition*/
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

/*--------------------------------------------------------------------------*\
        Specific : Sidebar with topbar and no header
        (we simplify : the same on large and small screens)
\*--------------------------------------------------------------------------*/

.burger-input--sidebar.burger-input--menu-top-position-topbar+.burger-label{
    /*box*/
    height: var(--topbar-height);
    width: var(--topbar-height);
}

/*--------------------------------------------------------------------------*\
        Large screens
\*--------------------------------------------------------------------------*/

@media (min-width:900px) {

    .burger-input--900+.burger-label {
        /*box*/
        display: none !important;
    }

}

@media (min-width:700px) {

    .burger-input--700+.burger-label {
        /*box*/
        display: none !important;
    }

}

@media (min-width:500px) {

    .burger-input--500+.burger-label {
        /*box*/
        display: none !important;
    }

}

/*--------------------------------------------------------------------------*\
        When menu is opend (= input is checked)
\*--------------------------------------------------------------------------*/

.burger-input:checked+.burger-label {
    /*transform*/
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}