// 纵向菜单，默认样式
.el-menu {
    &:not(.el-menu--collapse) {
        .el-menu-item, .el-submenu .el-submenu__title {
            i {
                &:not(.el-icon-arrow-down) {
                    font-size: 18px;
                    width: 18px;
                    height: 18px;
                    margin-right: 8px;
                }
                &.el-icon-arrow-down {
                    margin-top: -4px;
                }
            }
        }
        &.el-menu--horizontal {
            .el-menu-item, .el-submenu .el-submenu__title {
                i.el-icon-arrow-down {
                    margin-top: -3px;
                }
            }
        }
    }
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        i {
            color: $--color-light3;
        }
    }
    .el-submenu {
        .el-submenu__title {
            height: 40px;
            line-height: 40px;
            i {
                color: $--color-light3;
            }
        }
    }
    &-icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        line-height: 1;
        font-weight: normal;
        font-variant: normal;
    }
    // 浅色主题
    &.light-theme {
        .el-submenu, .el-menu-item {
            i.el-menu-icon, i.el-submenu__icon-arrow {
                color: nth($--color-text-dark-maps, 3);
            }
        }
        .el-menu-item {
            &.is-active, &.is-active:hover {
                background-color: $--color-primary-light-10;
                color: $--color-primary;
                border-right: 4px solid $--color-primary;
            }
            &:hover {
                background-color: $--color-white;
                color: $--color-primary;
                i {
                    color: $--color-primary;
                }
            }
        }
        .el-submenu__title {
            &:hover {
                background-color: $--color-white;
                color: $--color-primary;
                i {
                    color: $--color-primary;
                }
            }
        }
    }
    // 深色主题
    &.dark-theme {
        &.el-menu--collapse{
            .el-menu-item{
                &:hover{
                    background-color: $--color-primary !important;
                }
            }
        }
        .el-menu-item {
            &.is-active, &.is-active:hover {
                background-color: $--color-primary !important;
                color: $--color-white !important;
            }
            &:hover {
                background: none !important;
                color: $--color-white !important;
                i {
                    color: $--color-white !important;
                }
            }
        }
        .el-submenu__title {
            &:hover {
                background: none !important;
                color: $--color-white !important;
                i {
                    color: $--color-white !important;
                }
            }
        }
        // 深色主题子菜单展开颜色更深
        .el-submenu.is-opened {
            .el-submenu__title {
                background-color: #242838 !important;
            }
            .el-menu.el-menu--inline {
                .el-menu-item {
                    background-color: #242838 !important;
                    &.is-active, &.is-active:hover {
                        background-color: $--color-primary !important;
                        color: $--color-white !important;
                    }
                }
            }
        }
    }

    // 1、2、3级菜单左偏移修正
    .el-menu-custom-level-1 {
        &.el-menu-item {
            padding-left: 16px !important;
        }
        &.el-submenu > .el-submenu__title {
            padding-left: 16px !important;
        }
    }
    .el-menu-custom-level-2 {
        &.el-menu-item {
            padding-left: 42px !important;
        }
        &.el-submenu > .el-submenu__title {
            padding-left: 42px !important;
        }
    }
    .el-menu-custom-level-3 {
        padding-left: 58px !important;
    }

    // 横向菜单
    &.el-menu--horizontal {
        .el-menu-item {
            height: 60px;
            line-height: 60px;
        }
        .el-submenu {
            .el-submenu__title {
                height: 60px;
                line-height: 60px;
            }
        }
    }

    // 导航收起状态
    &.el-menu--collapse {
        width: 64px;
        & > .el-submenu > .el-submenu__title i.el-menu-icon {
            margin: 0;
        }
        .el-submenu > .el-submenu__title {
            padding-left: 20px !important;
        }
        &.light-theme {
            .el-menu-item .el-tooltip, .el-submenu__title {
                &:hover {
                    border-right: 4px solid $--color-primary;
                }
            }
            .el-menu-item.is-active {
                border-right: none;
                .el-tooltip {
                    &:hover {
                        border-right: 4px solid $--color-primary;
                    }
                }
            }
        }
        &.dark-theme {
            .el-menu-item:hover {
                .el-tooltip {
                    background-color: $--color-primary;
                }
            }
            .el-submenu {
                .el-submenu__title:hover {
                    background-color: $--color-primary !important;
                }
            }
        }
    }
}

// 显示器宽度小于1440px时，纵向导航菜单宽度为200px
@media screen and (max-width: 1440px) {
    .custom-el-menu-vertical {
        width: 200px;
    }
}

// 当显示器宽度大于1440时，纵向导航栏宽度为240px
@media screen and (min-width: 1440px) {
    .custom-el-menu-vertical {
        width: 240px;
    }
}

// 横向菜单下拉浮层
.el-menu--horizontal {
    .el-menu.el-menu--popup {
        .el-menu-item {
            height: 42px;
            line-height: 42px;
        }
        .el-submenu {
            .el-submenu__title {
                height: 42px;
                line-height: 42px;
            }
        }
    }
}

// 导航菜单收起时，浮动菜单
.el-menu--popup-right-start {
    margin-left: 0;
    margin-right: 0;
}

// 导航收起，单个导航浮动菜单
//.el-tooltip__popper.is-dark {
//    box-sizing: border-box;
//    width: 180px;
//    height: 40px;
//    line-height: 40px;
//    background: #E6EDF4;
//    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
//    color: $--color-primary;
//    border-radius: 0;
//    padding: 0 20px;
//    font-size: 14px;
//    .popper__arrow {
//        display: none;
//    }
//}
//.el-tooltip__popper[x-placement^="right"] {
//    margin-left: 0;
//}

// 导航菜单收起状态，右侧浮动菜单样式（应当在组件重写，防止修改全局样式）
.el-menu.el-menu--popup.el-menu--popup-right-start {
    background-color: #ffffff !important;
    .el-menu-item {
        background-color: #ffffff !important;
        color: rgba(0, 0, 0, .7) !important;
        i {
            color: rgba(0, 0, 0, .7) !important;
        }
        &.is-active, &.is-active:hover {
            background-color: $--color-primary-light-10 !important;
            color: $--color-primary !important;
        }
        &:hover {
            color: #296AB4 !important;
            i {
                color: #296AB4 !important;
            }
        }
    }
    .el-submenu {
        .el-submenu__title {
            background-color: #ffffff !important;
            color: rgba(0, 0, 0, .7) !important;
            &:hover {
                color: $--color-primary !important;
            }
        }
    }
}

.custom-el-menu-horizontal {
    display: flex;
    flex-direction: row;
    .el-menu.el-menu--horizontal {
        width: 100%;
        border-bottom: 0;
        // border-bottom: 1px solid #e6e6e6 !important;
    }
}

// 横向导航菜单头像、控制按钮样式
.custom-el-menu-horizontal-icons {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    .icon {
        text-align: center;
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        color: $--color-gray-light-4;
        cursor: pointer;
        // border-bottom: 1px solid #e6e6e6;
        &:hover {
            color: $--color-gray-light-1;
            background-color: #e6e6e6;
        }
    }
    .avatar {
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: $--color-gray-light-4;
        cursor: pointer;
        // border-bottom: 1px solid #e6e6e6;
        padding: 0 8px;
        position: relative;
        img {
            width: 36px;
            height: 36px;
            margin-top: 12px;
            vertical-align: top;
            display: inline-block;
            border-radius: 1000px;
            overflow: hidden;
        }
        .name {
            margin-left: 8px;
            font-size: 14px;
        }
        &:hover .details {
            display: block;
        }
        .details {
            display: none;
            width: 100px;
            padding: 10px 20px;
            margin: 0;
            position: absolute;
            right: 0;
            top: 61px;
            background-color: $--color-white;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
            list-style: none;
            li {
                line-height: 21px;
                list-style: none;
                font-size: 14px;
                margin-bottom: 10px;
                text-align: left;
                &:last-child {
                    margin-bottom: 0;
                }
                &:hover {
                    color: #000;
                }
            }
        }
    }
}