@import '../../style/variable.scss';
.x-sidebar{
    width: 2rem;
    color: $theme-deep-font;
    border-right: .5px solid #E9E9E9;
    background-color: #fff;
    margin-top: .2rem;
    height: 100vh;
    overflow-y: scroll;
    .tree-header{
        position: relative;
        .header-icon{
            font-size: .12rem;
        }
    }

    .pull-right{
        width: auto;
        position: absolute;
        right: .2rem;
        transition: transform .5s ease;
    }
    .treeview.menu-open {
        .pull-right {
            transform: rotate(-90deg);
            transition: transform .5s ease;
        }
    }
    .treeview-menu {
        height: 0;
        transition: height .5s;
        padding-left: 0;
        overflow: hidden;
        .menu-item{
            font-size: .12rem;
            .english-name{
                margin-right: .1rem;
            }
            .name{
                color: $theme-shallow-font;
            }
        }
    }
    .child-icon{
        font-size: .12rem;
        margin-right: .1rem;
    }
    .menu-item, .tree-header {
        padding: .12rem .2rem;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover a{
            color: $theme-active;
            .name{
                color: $theme-active;
            }
        }
        &.active {
            cursor: pointer;
            a, .name {
                color: $theme-active;
            }
            background-color: rgba($color: $theme-active, $alpha: 0.1);
            // transition: background-color .3s ease;
            border-right: 3px solid $theme-active;
            // transition: border-right 1s ease;
        }
        .icon-left{
            width:.2rem;
        }
    }
}