#navContainer {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    background-color: var(--color-primary);
    padding: var(--padding);
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    position: relative;
    transition: padding var(--ease-medium);
}

#navContainer header {
    all: unset;
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
    width: 100%;
    height: fit-content;
}

.navHeader_profileImgContainer {
    aspect-ratio: 1 / 1;
    height: 36px;
    background-color: white;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.navHeader_profileContainer {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

#navContainer {

    button { background-color: transparent; }

    .toggleNavBtn {
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: .5;
        transition: opacity var(--ease-fast);
        &:hover {
            opacity: 1;
        }
    }

    .headCta {
        width: 100%;
        padding: var(--padding-sm);
        background-color: var(--color-accent);
    }

    .navButtonContainer {
        margin-top: var(--gap-bg);
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
        height: 100%;
        width: 100%;
        position: relative;

        .navButtonBottom {
            position: absolute;
            bottom: 0px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--gap-sm) !important;

            span { 
                opacity: .8;
                transition: opacity var(--ease-fast);
                &:hover { opacity: 1; } 
            }
        }
    }

    .navButton_descContainer {
        display: flex;
        flex-direction: column;
        justify-self: center;
        overflow: hidden;
        width: 100%;

        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
    }

    .navButton {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-sm);
        height: fit-content;
        width: 100%;
        cursor: pointer;
        padding: var(--padding-sm);
        border-radius: var(--radius-sm);
        box-sizing: border-box;
        transition: background-color var(--ease-fast);

        img {
            aspect-ratio: 1 / 1;
            height: 1.1rem;
            object-fit: cover;
            display: block;
        }

        &:hover { background-color: var(--color-secondary); }

    }

    .logout:hover { background-color: var(--color-warning) !important; }

    .settingsBtn {
        img { transition: rotate var(--ease-medium); }
        &:hover img { rotate: -90deg; }
    }

    .navNotes {
        display: flex;
        flex-direction: column;
        height: fit-content;
        max-height: 60%;
        overflow-y: scroll;
        scrollbar-width: none;

        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        figure {
            all: unset;
            width: 17.6px;
            height: calc(100% + var(--padding-sm) + var(--gap-sm));
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            gap: var(--gap-sm);
            opacity: .2;
            filter: var(--icon-brigtness);
            &::after {
                content: '';
                width: 1px;
                height: 100%;
                background-color: white;
            }
        }
    }

}


.navContainerHidden {
    padding: var(--padding-sm) !important;

    .navHeader_profileImgContainer { display: none !important; }
    .navHeader_profileContainer { display: none !important; }
    .headCta {
        padding: var(--padding) !important;
        scale: .8;
    }
    .navButtonContainer { align-items: center !important; }
    .navButton span { display: none !important; }
    .navButton {
        padding: var(--padding-sm) !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
    }
    .navNotes {
        display: none !important;
        padding: unset !important;
    }
    .toggleNavBtn {
        position: relative !important;
        right: unset !important;
        display: flex;
        justify-content: center;
        align-items: center;

        img { transform: rotate(180deg); }
    }
    header { justify-content: center !important; }
}

.fold {
    max-height: calc(var(--padding) + 1rem) !important;
}