.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 {
    border-right: none;
    background-color: #001529;

    .el-menu--vertical {

        .el-menu-item,
        .el-submenu__title {
            height: 40px;
            line-height: 40px;
            padding: 0 15px 0 16px !important;
            color: var(--app-color-white) !important;

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

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

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

    &.el-menu--collapse {
        .el-menu--vertical {
            .el-submenu__title {
                .el-submenu__icon-arrow {
                    display: none;
                }
            }
        }
    }
}

.el-menu--vertical.app-popper-menu {

    .el-menu-item,
    .el-submenu__title {
        height: 40px;
        line-height: 40px;
        padding: 0 15px 0 16px !important;
        color: var(--app-color-white) !important;

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

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

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