/*
// ===================================================================================================
// ## sidebar css
// =================================================================================================== 
*/

/* ids */

#sidebar {
    display: none !important;
    position: fixed; top: 0; z-index: 9999;

    width: 100%; height: fit-content; 
    display: flex; justify-content: space-between; align-items: start; flex-direction: column;
    padding-inline: 30px; padding-block: 5px;
    gap: 40px;
    /* background-color: var(--osso-light);  */
    background-color: var(--osso); 
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--white-2);
    box-sizing: border-box;
}

#offcanvas {
    padding-bottom: 40px;
}

#navbar-logo {
    width: 45px; height: auto;
}

/* class */

.offcanvas-list {
    display: flex; justify-content: start; align-items: start; flex-direction: column;
    gap: 10px;
}

.navbar-link {
    min-height: 34px;
    display: flex; justify-content: start; align-items: center;
    gap: 8px; padding: 5px 10px; 
    box-sizing: border-box; border-radius: 4px;

    font-family: var(--redhat);
    font-size: var(--h5);
    font-weight: var(--normal);
    color: var(--black);
}
.navbar-link:hover {
    cursor: pointer;
    background-color: var(--panna);
}

.navbar-link .lucide {
    width: 1.8cap;
    color: var(--gray);
}
.navbar-link:hover .lucide {
    color: var(--black);
}