.el-menu--light {
    // 侧边栏垂直菜单
    &.el-menu--vertical {
        // 菜单的文字以及hover颜色
        .el-menu-item,
        .el-submenu__title {
            color: $menu-text-color-light;

            &:hover {
                color: $menu-text-hover-color-light;
            }
        }

        // 设置了显示弹出菜单的父级
        .el-menu--popup .popover-menu__title {
            color: $menu-text-color-light;
            border-bottom-color: $--border-color-light;
        }

        // 模仿ant-design的亮色菜单
        &:not(.el-menu--collapse) {
            .el-menu-item {
                // 小竖条
                &::after {
                    position: absolute;
                    top: 10%;
                    right: 0;
                    height: 80%;
                    border-right: 3px solid $--color-primary;
                    opacity: 0;
                    transform: scaleY(0);
                    transition: transform .15s cubic-bezier(.645, .045, .355, 1);
                    content: '';
                }

                &.is-active {
                    // 背景色
                    &::before {
                        position: absolute;
                        top: 10%;
                        left: 0;
                        height: 80%;
                        width: 100%;
                        background-color: rgba($--color-primary, .1);
                        content: '';
                    }

                    &::after {
                        opacity: 1;
                        transform: scaleY(1);
                    }
                }
            }

            // 弹出菜单激活时不显示右边框
            .el-menu--popup .el-menu-item::after {
                display: none;
            }
        }
    }

    // 顶部水平菜单
    &.el-menu--horizontal {
        // 菜单的文字以及hover颜色
        .el-menu-item,
        .el-submenu__title {
            color: $menu-text-color-light;

            &:hover {
                color: $menu-text-hover-color-light;
            }
        }
    }
}