/* l-menu-top  横向导航布局
-------------------------- */
@mixin menu-tb-height {
    height: $l-main-header-height;
    line-height: $l-main-header-height;
}

.u-menu-top {
    flex: 1;
    min-width: 0;
    &__list {
        width: 100%;
        &.el-menu.el-menu--horizontal {
            border-bottom: 0;
        }
    }
    &__item {
        margin: 0;
        float: left;
        @include menu-tb-height;
        .el-menu-item {
            padding: 0 1.5rem;
        }
        > .el-submenu .el-submenu__icon-arrow,
        > .el-submenu .icon {
            display: none;
        }
        > .el-submenu span,
        .el-menu-item span {
            color: $u-menu-top-item-font;
        }
        .el-menu-item .icon {
            display: none;
        }
        .el-menu-item .icon {
            display: none;
        }
        .el-menu-item {
            @include menu-tb-height;
        }
        .el-submenu,
        .el-submenu__title {
            box-sizing: border-box;
            @include menu-tb-height;
        }
        .el-submenu__title {
            border-bottom: 2px solid transparent;
        }
        .el-submenu.is-active .el-submenu__title {
            border-bottom-color: $u-menu-top-border-bottom-color;
        }
        .el-submenu__title:hover,
        .el-submenu__title:focus {
            background: $u-menu-top-item-active-bg;
            border-bottom-color: $u-menu-top-border-bottom-color;
        }
        .el-menu-item:hover,
        .el-menu-item:focus {
            background: $u-menu-top-item-active-bg;
            border-bottom: 2px solid $u-menu-top-border-bottom-color;
        }
        .el-menu-item.is-active,
        .el-submenu.is-active {
            border-bottom: 2px solid $u-menu-top-border-bottom-color;
        }
    }
    &__popover {
        background: transparent;
        &.is-hidden {
            display: none;
        }
        .el-menu--popup {
            padding: 4px 0;
            background: $u-menu-top-popover-background;
        }
        .el-menu-item:not(.is-disabled):hover,
        .el-menu-item:not(.is-disabled):focus {
            background-color: $u-menu-top-active-bg;
        }
        .el-menu .el-menu-item.is-active,
        .el-menu .el-submenu.is-active > .el-submenu__title {
            background-color: $u-menu-top-select-bg;
            color: $u-menu-top-active-font;
        }
        .el-menu .el-menu-item,
        .el-menu .el-submenu__title {
            background: $u-menu-top-popover-background;
            padding: 0 1rem 0 1.5rem;
            height: 3rem;
            line-height: 3rem;
        }
        .el-menu .el-menu-item,
        .el-menu .el-submenu__title {
            color: $u-menu-top-sub-item-font;
        }
        .el-submenu__title .icon {
            display: none;
        }
    }
}