#navbar {
    z-index: 4;
    width: var(--navbar-width);
    padding: 1.5rem .5rem .5rem;
    border-radius: 0 2rem 0 0;
    transform: translateX(0);
    transition: 100ms;
}

#navbar .menu {
    --menu-active-fg: var(--color-primary-content);
    --menu-active-bg: var(--color-primary);
}

#navbar .menu-active {
    background-color: var(--color-primary);
}

#navbar::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#navbar .menu-active .avatar {
    >div {
        background-color: var(--menu-active-fg);

        >span {
            color: var(--color-primary);
        }
    }

}

#navbar-overlay {
    z-index: 3;
    height: 0;
    width: 0;
    background: transparent;
    transition: background 100ms;
}

@media only screen and (max-width: 1000px) {
    #navbar {
        transform: translateX(-100%);

    }

    #navbar[data-open="true"] {
        transform: translateX(0);
    }

    body:has(#navbar[data-open="true"]) #navbar-overlay {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

}