/*--------------------------------------------------------------------------*\
    Container of navigation elements (home and navigation)
\*--------------------------------------------------------------------------*/

.sidebar__nav {
    /*box*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 80%;
    padding: 20px;
}

/*--------------------------------------------------------------------------*\
        Specific : Only sidebar (no header and no topbar)
\*--------------------------------------------------------------------------*/

.burger-input--sidebar+.burger-label+.sidebar-main-wrapper>.sidebar>.sidebar__nav{
    /*box*/
    padding-top:var(--header-height);
}

@media (min-width:900px) {

    .burger-input--900.burger-input--sidebar+.burger-label+.sidebar-main-wrapper>.sidebar>.sidebar__nav{
        /*box*/
        padding-top:20px !important;
    }

}

@media (min-width:700px) {

    .burger-input--700.burger-input--sidebar+.burger-label+.sidebar-main-wrapper>.sidebar>.sidebar__nav{
        /*box*/
        padding-top:20px !important;
    }

}

@media (min-width:500px) {

    .burger-input--500.burger-input--sidebar+.burger-label+.sidebar-main-wrapper>.sidebar>.sidebar__nav{
        /*box*/
        padding-top:20px !important;
    }

}

/*--------------------------------------------------------------------------*\
        Sidebar primary color (cf sidebar.css file)
\*--------------------------------------------------------------------------*/

.sidebar--primary .sidebar__nav {
    /*background*/
    background-color: var(--c-quaternary-4);
}

/*--------------------------------------------------------------------------*\
        Sidebar secondary color (cf sidebar.css file)
\*--------------------------------------------------------------------------*/

.sidebar--secondary .sidebar__nav {
    /*background*/
    background-color: var(--c-primary-1);
}

@media (min-width:900px) {

    .burger-input--900~.sidebar-main-wrapper .sidebar__nav {
        /*box*/
        width: 100% !important;
    }

}

@media (min-width:700px) {

    .burger-input--700~.sidebar-main-wrapper .sidebar__nav {
        /*box*/
        width: 100% !important;
    }

}

@media (min-width:500px) {

    .burger-input--500~.sidebar-main-wrapper .sidebar__nav {
        /*box*/
        width: 100% !important;
    }

}