.MainNav {
    --collapsible-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-opened-duration: 300ms;
    --sidebar-closed-duration: 250ms;

    background-color: var(--midnight-950);
    border-right: 2px solid transparent;
    display: flex;
    flex-direction: column;
    padding: 0 8px 10px 10px;
    position: relative;
    overflow: visible;
    transition: width var(--sidebar-opened-duration) var(--collapsible-easing);
    width: $main-nav-width;
    height: 100%;

    &:hover {
        border-right: 2px solid var(--midnight-500);

        .MainNavToggle {
            opacity: 1;
        }
    }

    &.collapsed {
        width: $main-nav-collapsed-width;
        transition: width var(--sidebar-closed-duration) var(--collapsible-easing);

        .NavLink {
            &-title {
                opacity: 0;
                visibility: hidden;
                transition:
                    opacity 0.1s ease-out,
                    visibility 0.1s ease-out;
            }

            &:hover:not(.MainNavHeader-link) {
                border-top-right-radius: 6px;
                border-bottom-right-radius: 6px;
                width: fit-content;
                white-space: pre;
                z-index: 1070;

                .NavLink-title {
                    opacity: 1;
                    visibility: visible;
                    transition: none;
                }
            }
        }
    }

    .MainNav-menu-items {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        flex-grow: 1;

        &.secondary {
            flex-grow: 0;
            margin-bottom: 14px;
        }
    }
}