.aside {
    position: fixed;
    top: 0;
    bottom: 0;
    margin-top: @header-hg;
    width: @aside-wd;
    background-color: @aside-bg;
    transition: width .2s @layout-ease, translate .2s @layout-ease;
    z-index: @zindex + 5;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-right: 1px solid @content-heading-border;
    }
    &-inner {
        overflow-x: hidden;
        // overflow-y: scroll;
        // margin-right: -17px;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        // only desktop
        @media (min-width: 1025px) {
            margin-right: -17px;
            overflow-y: scroll;
        }
    }
}

// Main Nav
@nav-prefix-cls: nav;
.@{nav-prefix-cls} {
    display: block;
    font-size: @aside-nav-fs;
    >li {
        position: relative;
        border-left: 3px solid transparent;
        transition: border-left-color .4s ease;
        >a {
            color: @aside-nav-text-color;
            text-decoration: none;
            padding: @aside-nav-padding-top-bottom @layout-gutter * 2;
            white-space: nowrap;
            position: relative;
            display: block;
            i {
                min-width: 14px;
                display: inline-block;
                margin-right: @layout-gutter;
                transition: font-size .15s @ease-out, margin .3s @ease-in-out;
            }
            > span {
                transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
                opacity: 1;
            }
            &:hover {
                color: @aside-nav-text-hover-color;
            }
        }
        &.@{nav-prefix-cls}-group-title {
            color: @aside-nav-group-text-color;
            padding: @aside-nav-padding-top-bottom @layout-gutter * 2;
        }
        // Badge
        .badge {
            position: absolute;
            right: @layout-gutter * 2;
            @badge-height: @layout-gutter * 2;
            &:not(.badge-dot) {
                top: (@aside-nav-item-height - @badge-height) / 2;
                height: @badge-height;
                width: @badge-height;
                line-height: @badge-height;
                padding: 0;
                overflow: hidden;
            }
            &-dot {
                top: (@aside-nav-item-height - @layout-gutter) / 2;
            }
        }
        // Selected
        &.@{nav-prefix-cls}-item-selected {
            border-left-color: @aside-nav-selected-text-color;
            background-color: @aside-nav-selected-bg;
            >a {
                color: @aside-nav-selected-text-color;
            }
        }
    }
    &-sub {
        &-title {
            @fix-aside-icon-top: (((@aside-nav-fs * @line-height-base) + (@aside-nav-padding-top-bottom * 2)) - 18) / 2;
            &:after {
                content: "\E61D";
                font-family: anticon!important;
                font-style: normal;
                vertical-align: baseline;
                text-align: center;
                text-transform: none;
                text-rendering: auto;
                position: absolute;
                right: @layout-gutter * 2;
                top: @fix-aside-icon-top;
                display: inline-block;
                font-size: 12px;
                transform: scale(.66666667) rotate(0deg);
                transition: transform .3s @ease-in-out;
                zoom: 1;
            }
        }
        display: none;
        overflow: hidden;
        >li {
            border-left: 0!important;
        }
    }
    // Actives
    >li {
        // Open Submenu
        &.@{nav-prefix-cls}-submenu-open {
            .@{nav-prefix-cls}-sub-title {
                &:after {
                    transform: rotate(180deg) scale(.75);
                }
            }
            .nav-sub {
                display: block;
                animation: fadeIn .5s;
            }
        }
    }
    // Dept
    &-depth1 {
        > li > a {
            padding-left: @layout-gutter * 5;
        }
    }
    &-depth2 {
        > li > a {
            padding-left: @layout-gutter * 7;
        }
    }
    &-depth3 {
        > li > a {
            padding-left: @layout-gutter * 9;
        }
    }
    // Floating
    &-floating {
        position: absolute;
        z-index: @zindex + 7;
        min-width: 160px;
        border: 1px solid @content-heading-border;
        background-color: @aside-bg;
        border-radius: 4px;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: visibility .3s @ease-in-out,
                    opacity .3s @ease-in-out;

        >li {
            a {
                padding-left: @layout-gutter * 2;
            }
        }
        &-show {
            visibility: visible;
            opacity: 1;
        }
        .@{nav-prefix-cls}-sub {
            display: block;
        }
        // Dept
        .@{nav-prefix-cls}-depth2 {
            > li > a {
                padding-left: @layout-gutter * 4;
            }
        }
        .@{nav-prefix-cls}-depth3 {
            > li > a {
                padding-left: @layout-gutter * 6;
            }
        }
    }
}

@user-block-width: @aside-wd - (@layout-gutter * 6);
@user-block-avatar-hw: @avatar-size-lg;
.user-block {
    padding-top: (@layout-gutter * 3);
    margin: 0 auto;
    display: block;
    width: @user-block-width;
    cursor: pointer;
    .user-block-dropdown {
        display: flex;
        align-items: center;
    }
    .info {
        color: @text-color;
        width: @user-block-width - @user-block-avatar-hw - @layout-gutter;
    }
    .avatar {
        margin-right: @layout-gutter;
    }
}

// Desktop
@media (min-width: @screen-sm) {
    .aside-collapsed {
        .aside {
            width: @aside-collapsed-wd;
        }
        .@{nav-prefix-cls}:not(.@{nav-prefix-cls}-sub) {
            > li {
                border: none;
                &.@{nav-prefix-cls}-group-title {
                    display: none;
                }
                > a {
                    text-align: center;
                    padding: (@layout-gutter * 3) 0;
                    i {
                        margin-right: 0;
                        font-size: @aside-collapsed-nav-fs;
                    }
                    > span {
                        max-width: 0;
                        display: inline-block;
                        opacity: 0;
                    }
                }
            }
        }
        .@{nav-prefix-cls} {
            &-sub {
                display: none !important;
                &-title {
                    &:after {
                        display: none;
                    }
                }
            }
        }
        .user-block {
            width: @aside-collapsed-wd;
            .info {
                display: none;
            }
            .avatar {
                margin: 0 auto;
            }
        }
    }
}

// Under pad
@media (max-width: @screen-sm) {
    .aside,
    .content {
        transition: transform .3s ease;
    }
    .content {
        transform: translate3d(@aside-wd, 0, 0);
    }
    .aside-collapsed {
        .aside {
            transform: translate3d(-100%, 0, 0);
        }
        .content {
            transform: translateZ(0);
        }
    }
}