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

.sidebar {
    /*box*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-width: 270px;
    z-index: 11;/* Max index for header */
    flex:0 0 auto;

    /*text*/
    font-family: var(--ff-title);
}

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

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

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

.burger-input--menu-top-position-topbar~.sidebar-main-wrapper>.sidebar{
    /*box*/
    height: -webkit-calc(100vh - var(--topbar-height));
    height: calc(100vh - var(--topbar-height));
    top:var(--topbar-height) !important;
}

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

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

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

.burger-input--sidebar+.burger-label+.sidebar-main-wrapper>.sidebar{
    /*box*/
    height: 100vh;
}

@media (min-width:900px) {

    .burger-input--900~.sidebar-main-wrapper>.sidebar {
        /*box*/
        position: -webkit-sticky !important;
        position: sticky !important;

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

}

@media (min-width:700px) {

    .burger-input--700~.sidebar-main-wrapper>.sidebar {
        /*box*/
        position: -webkit-sticky !important;
        position: sticky !important;

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

}

@media (min-width:500px) {

    .burger-input--500~.sidebar-main-wrapper>.sidebar {
        /*box*/
        position: -webkit-sticky !important;
        position: sticky !important;

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

}

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

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

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

    /*transition*/
    -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)~.sidebar-main-wrapper>.sidebar {
    /*transform*/
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

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