.ht-base-menu {

  //图标距右
  .ht-base-menu-item {
    & > i {
      margin-right: 8px;
    }
  }

  //主题
  &.ivu-menu-primary {
    background: @primary-color;
  }

  //深色
  &.ivu-menu-dark {
    background: @title-color;
  }

  //浅色
  &.ivu-menu-light {
    background: @white;

    &:after {
      background: @border-color-base;
    }
  }

  //水平菜单
  &.ivu-menu-horizontal {
    height: 64px;
    line-height: 64px;

    .ht-base-menu-item {
      padding: 0 16px;

    }

    .ht-base-submenu {
      .ivu-select-dropdown {
        padding: 4px 0;
        min-width: 160px !important;

        .ht-base-menu-group {
          .ivu-menu-item-group-title {
            padding: 0 8px;
            color: @sub-color;
          }
        }

        .ht-base-menu-item {
          height: 32px;
          line-height: 32px;
          padding: 0 16px;
          color: @text-color;

          &:hover {
            background: @background-color-base;
            color: @text-color;
          }

          &:focus, &.ivu-menu-item-active.ivu-menu-item-selected {
            color: @primary-color;
            background: transparent;
          }

          &.ivu-menu-item-disabled {
            color: @disabled-color;

            &:hover {
              background: transparent;
            }
          }
        }
      }
    }

    //水平主题菜单
    &.ivu-menu-primary {
      .ht-base-menu-item {
        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-item-selected {
          background-color: @primary-7;
        }
      }

      .ht-base-submenu {
        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-child-item-active {
          background-color: @primary-7;
        }
      }
    }

    //水平深色
    &.ivu-menu-dark {
      .ht-base-menu-item {
        color: @sub-color;

        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-item-selected {
          color: @white;
        }
      }

      .ht-base-submenu {
        color: @sub-color;

        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-child-item-active {
          color: @white;
        }
      }
    }

    //水平浅色
    &.ivu-menu-light {
      .ht-base-menu-item {
        color: @text-color;

        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-item-selected {
          color: @primary-color;
          border-bottom: 2px solid @primary-color;
        }
      }

      .ht-base-submenu {
        color: @text-color;

        &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-child-item-active {
          color: @primary-color;
          border-bottom: 2px solid @primary-color;
        }

        .ivu-select-dropdown {
          .ht-base-menu-item {
            &:hover, &:focus, &.ivu-menu-item-active.ivu-menu-item-selected {
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  //垂直菜单
  &.ivu-menu-vertical {
    & .ht-base-menu-item {
      padding: 0 0 0 24px;
      height: 48px;
      line-height: 48px;
    }

    & .ht-base-submenu {
      .ht-base-menu-item {
        padding-left: 48px !important;
      }

      .ht-base-menu-group {
        .ivu-menu-item-group-title {
          padding-left: 48px !important;
        }

        .ivu-menu-submenu-has-parent-submenu {
          .ivu-menu-submenu-title {
            padding-left: 48px !important;
          }

          .ht-base-menu-group {
            .ht-base-menu-item {
              padding-left: 72px !important;
            }
          }
        }
      }
    }

    & .ivu-menu-submenu-title {
      padding: 0 0 0 24px;
      height: 48px;
      line-height: 48px;
      color: @disabled-color; //标注@sub-color，但第一版测试用的disable-color
    }

    & .ht-base-menu-group {
      .ht-base-menu-item {
        color: @disabled-color;
      }

      .ivu-menu-item-group-title {
        color: @sub-color;
      }
    }


    //垂直深色
    &.ivu-menu-dark {
      background: @text-color;

      .ht-base-menu-item {
        &.ivu-menu-item-active:not(.ivu-menu-submenu) {
          color: @disabled-color;

          &, &:hover, &.ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover {
            color: @white;
          }
        }

        &.ivu-menu-item-active.ivu-menu-item-selected {
          background: @primary-color!important;
        }

        &:hover {
          background: transparent;
        }
      }

      //垂直——分组深色
      & .ht-base-menu-group {
        .ht-base-menu-item {
          &:hover {
            color: @white;
          }
        }
      }

      //垂直菜单———折叠导航深色
      .ivu-menu-opened {
        background: transparent;

        .ivu-menu-submenu-title {
          background: @text-color;

          &:hover {
            background: @text-color;
          }
        }

        &.ht-base-submenu {
          .ht-base-menu-item {
            background: @title-color;

            &:hover {
              background: @title-color !important;
            }

            &.ivu-menu-item-active.ivu-menu-item-selected:hover {
              background: @primary-color !important;
            }
          }

          .ht-base-menu-group {
            .ivu-menu-item-group-title {
              background: @title-color;
              color: @sub-color;
            }

            .ivu-menu-submenu-has-parent-submenu {
              .ivu-menu-submenu-title {
                color: @disabled-color;

                &:hover {
                  color: @white;
                }
              }

              &.ivu-menu-child-item-active {
                .ivu-menu-submenu-title {
                  color: @white;
                }
              }
            }
          }
        }
      }

      //折叠导航标题内有选择项——标题
      .ht-base-submenu.ivu-menu-item-active.ivu-menu-child-item-active {
        .ivu-menu-submenu-title {
          color: @white;
        }
      }

      .ivu-menu-submenu-title {
        color: @disabled-color;

        &:hover {
          background: transparent;
          color: @white;
        }
      }
    }

    //垂直浅色
    &.ivu-menu-light {
      background: @white;

      &:after {
        background: @border-color-base;
      }

      .ht-base-menu-item {
        color: @text-color;

        &:hover {
          color: @primary-color;
        }

        &.ivu-menu-item-active:not(.ivu-menu-submenu):after {
          background: @primary-color;
        }

        &.ivu-menu-item-active.ivu-menu-item-selected, &:focus {
          color: @primary-color;
          background: @primary-1;
        }
      }

      .ivu-menu-submenu-title {
        color: @text-color;

        &:hover {
          color: @primary-color;
        }
      }

      //垂直——折叠浅色

      //折叠导航标题内有选择项——标题
      .ht-base-submenu.ivu-menu-child-item-active {
        .ivu-menu-submenu-title {
          color: @primary-color;
        }
      }

      .ht-base-menu-group {
        .ivu-menu-submenu-has-parent-submenu {
          .ivu-menu-submenu-title {
            color: @text-color;

            &:hover {
              color: @primary-color;
            }
          }

          &.ivu-menu-child-item-active {
            .ivu-menu-submenu-title {
              color: @primary-color;
            }
          }
        }
      }
    }
  }

  &.ht-base-menu-theme-transparent{
    background: transparent;
    &.ivu-menu-light{
      .ht-base-menu-item,.ht-base-submenu{
        background: transparent;
        color: @white;
        &:hover,&.ivu-menu-item-active.ivu-menu-item-selected,&.ivu-menu-item-active.ivu-menu-child-item-active{
          background-color: rgba(0, 0, 0, 0.349019607843137);
          color: @white;
          border-bottom: none;
        }
      }
      &:after{
        height: 0;
      }
    }
  }
}
