.el-menu--horizontal {
    display: flex;

    .el-menu-item,
    .el-submenu__title {
        background-color: var(--app-color-black) !important;
        color: var(--app-color-white) !important;

        &:hover,
        &.is-active {
            background: #202027 !important;
        }
    }

    >.el-menu-item {
        height: 64px;

        &.is-active {
            background: #202027 !important;
            border-bottom: 4px solid var(--app-color-yellow);
            border-bottom-color: var(--app-color-yellow) !important;
        }
    }

    >.el-submenu {
        .el-submenu__title {
            height: 64px;
        }

        &.is-active,
        &.is-opened {
            .el-submenu__title {
                border-bottom: 4px solid var(--app-color-yellow);
                border-bottom-color: var(--app-color-yellow) !important;
            }
        }
    }

    .el-submenu__icon-arrow {
        display: none;
    }

    &.app-popper-menu {
        .el-menu--popup {
            padding: 0;

            .el-menu-item,
            .el-submenu__title {
                height: 40px;
                padding: 0 12px;
                border-bottom: 1px solid var(--app-color-gray-250);
                border-bottom-color: var(--app-color-gray-250) !important;
            }
        }
    }
}

.el-menu--vertical {

    .el-menu-item,
    .el-submenu__title {
        height: 40px;
        line-height: 40px;
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        color: var(--app-color-white);
        background-color: #001529;

        .fa,
        .el-submenu__icon-arrow {
            color: var(--app-color-white);
        }

        &:hover,
        &.is-active {
            background-color: var(--app-color-blue);
        }
    }

    .el-submenu {
        &.is-active {
            >.el-submenu__title {
                background-color: var(--app-color-blue);
            }
        }
    }
}