/*--------------------------------------------------------------------------*\
    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;
}


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

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__home-description{
    /*box*/
    display: none;
}

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__menu-text{
    /*box*/
    position:absolute;
    top:3px;
    left:25px;
    display: none;
    padding:5px;

    /*border*/
    border-radius: 5px;

    /*background*/
    background-color: var(--c-primary-1);

    /*text*/
    color:var(--c-tertiary-4);
}

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__menu-link:hover .sidebar__menu-text{
    /*box*/
    display:block;
}

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__avatar {
    /*box*/
    display: none;
}

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__home-logo {
    /*box*/
    display: none;
}

.sidebar:has(.sidebar__home-toggle-input:checked) .sidebar__menu{
    /*box*/
    overflow: visible;
}