@import "mixins/mixins";
@import "common/var";
@import "popover.scss";

@include b(nav-menu) {
    display: flex;
    justify-content: center;
    &-header {
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        padding: 4px 8px;
        color: #fff;
        border-radius: 4px;
        height: 20px;
        line-height: 20px;
        transition: all 0.3s;
        box-sizing: content-box;
        // 元素中被用户选中或处于高亮状态的部分的样式
        &::selection {
            background: none
        }
        // 下级菜单打开状态,悬浮和选中效果
        &:hover, &.is-opened, &.is-active {
            color: #303133;
            background-color: #fff;
            .el-nav-menu-header-icon{
                color: #303133;
            } 
        }
        &:hover, &.is-opened {
            .el-nav-menu-header-icon{
                transform: rotate(180deg) scale(0.66666);
            }
        }
        .el-nav-menu-header-label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .el-nav-menu-header-icon{
            color: #fff;
            font-size: 12px;
            transform:  scale(0.66666);
            transition: all .3s;
        }
    }
    &-header + &-header {
        margin-left: 8px;
    }
}

.el-nav-menu-popover {
    &.el-popover {
        padding: 0px;
        // top: 24px !important;
        min-width: unset;
    }
    &-container {
        display: flex;
        padding: 16px;
        &-item {
            &-title {
                font-size: 14px;
                color: #c0c4cc;
                margin: 8px;
                cursor: default;
            }
            .el-nav-menu-router {
                border-radius: 2px;
                height: 20px;
                line-height: 20px;
                color: #606266;
                font-size: 14px;
                cursor: pointer;
                padding: 6px 8px;
                &:hover {
                    background-color: rgba(236, 245, 255, 1);
                }
                &.is-active {
                    color: rgba(64, 158, 255, 1);
                    background-color: rgba(236, 245, 255, 1);
                }
            }
        }
        &-item + &-item {
            margin-left: 40px;
        }
    }
}
