//
// 导航条
// ============================================================


#NsUI
    height: 100%

.nav-wrapper
    @extend .transition-1s
    @extend .col-12
    background: rgba(0, 0, 0, 0)
    height: 50px
    &.active
        animation: nav-wrapper-active 1s
        display: flex !important
        @keyframes nav-wrapper-active
            0%
                background: rgba(0, 0, 0, 0)
            100%
                background: rgba(0, 0, 0, .3)
        .nav-list
            animation: nav-list-active 1s
            @keyframes nav-list-active
                0%
                    left: -100%
                100%
                    left: 0


    @media #{$media-max-lg}
        z-index: 1678
        position: fixed
        top: 0
        left: 0
        display: none !important
        width: 100%
        height: 100%
        background: rgba(0, 0, 0, .3)

// 导航
.nav-list
    @media #{$media-max-lg}
        +px(width, 218px)
        +px(margin-bottom, -36px)
        z-index: 1688
        position: fixed
        top: 0
        left: 0
        height: 100%
        background: white
    nav
        min-height: 100%

    .item
        @extend .position-relative
        @extend .white-space-nowrap
        @extend .color-gray
        @extend .font-size-sm
        @extend .margin-left-lg
        @media #{$media-max-lg}
            +px(line-height, 36px)
            display: block
            width: 100%
            margin-left:  10px !important

        [data-dpr] &
            @extend .font-size

        &:first-of-type
            @extend .margin-left

        &:hover
            span
                @extend .transition-1s
                @extend .color-white
                &:last-of-type
                    @extend .col-12
                    color: $link-hover

        &.active, &.router-link-exact-active
            span
                color: $link-active

        span
            &:last-of-type
                @extend .position-absolute
                @extend .left
                @extend .transition-1s
                @extend .overflow-hidden
                width: 0

    .fixed-bottom