.nav-sidebar
{
    height: 0!important;
    min-height: 100%!important;
    width: fit-content!important;
    display: block!important;
    padding: 1rem;
    background-image: linear-gradient(0, rgb(5, 39, 103) 0%, #3a0647 70%);
    overflow: auto;
    scrollbar-width: none;

    .nav-item
    {
        display: flex;
        align-items: center;
        height: 2.5rem;
        width: 200px;
        overflow: hidden;
        line-height: 1.125;

        .oi
        {
            top: -1px;
        }

        .oi, .bi
        {
            text-align: center;
            min-width: 1.25rem;
        }

        .nav-text
        {
            margin-left: 0.75rem;
        }
    }

    &.hiding, &.showing
    {
        transition: all var(--duration, .35s) ease;
        
        .nav-item
        {
            transition: all var(--duration, .35s) ease;

            .oi, .bi
            {
                transition: min-width var(--duration, .35s) ease;
            }

            .nav-text
            {
                transition: margin-left var(--duration, .35s) ease;
            }
        }
    }

    &.hiding, &.hide
    {
        width: 50px;
        padding: 0 4px;

        .nav-item
        {
            width: 42px;
            padding: 0;
            
            .oi, .bi
            {
                min-width: 42px;
            }

            .nav-text
            {
                margin-left: 0;
            }
        }
    }
}
