.menu {
  $root: #{&};
  display: block;
  margin: 0;
  padding: 0;
  outline: none;
  list-style: none;
  position: relative;
  &.menu__vertical{
    transition: max-height .3s;
    overflow: hidden;
  }
  //菜单边框
  &:after {
    content: '';
    display: block;
    background-color: $menu-border-color;
    position: absolute;
  }

  #{$root}__item,
  #{$root}__submenu-title
  {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: $menu-item-font-size;
    //菜单项为超链接时覆盖<a>默认样式
    a{
      display: block;
      color:inherit;
      font-size:inherit;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &  i {
      margin-right: $menu-item-icon-space-x;
      font-size: $menu-item-icon-font-size;
      letter-spacing: 0;
    }
  }

  #{$root}__item{
    padding: $menu-vertical-padding-y $menu-vertical-padding-x;
  }

  #{$root}__submenu{
    &-title {
      position: relative;
      padding:$menu-vertical-padding-y $menu-item-icon-font-size + $menu-item-icon-collapse-space-x + $menu-vertical-padding-x $menu-vertical-padding-y $menu-vertical-padding-x;
      &-icon {
        position: absolute;
        right: $menu-vertical-padding-x;
        top: 50%;
        transform: translate(0,-50%);
        margin-right:0 !important;
        &:before {
          @extend %aid-icon;
          content: '\F292';
          transition: $menu-item-transition;
        }
      }
    }

    &>ul.menu {
      //opacity: 0;
      //transition: all .5s ease-in-out 0s;
    }
    //菜单打开时 箭头图标逆时针旋转180度
    &#{$root}--open {
      & > #{$root}__submenu-title > #{$root}__submenu-title-icon:before {
        transform: rotate(-180deg);
      }
      //&>ul.menu {
      //  opacity: 1;
      //}
    }
  }

  ul{
    @include border-radius(0);
    border:none;
  }

  //item-group
  &__item-group {
    line-height: normal;
    list-style: none;
    border:none !important;
    &-title {
      display: block;
      width: 100%; // For `<button>`s
      clear: both;
      font-weight: $font-weight-normal;
      font-size: $font-size-xs;
      white-space: nowrap;
      cursor: auto;
      padding: $menu-vertical-padding-y $menu-vertical-padding-x;
      line-height: $menu-vertical-height;
    }

    & > ul {
      padding-left:0;
      list-style: none !important;
      li {
        white-space: nowrap;
      }
    }

    @at-root &{
      >ul{
        position: static !important;
      }
    }

    @include hover-focus{
      background-color: transparent !important;
    }

  }

  //横向菜单
  &--horizontal {
    height: $menu-horizontal-height;
    line-height: $menu-horizontal-height;
    &:after {
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
    }
    li{
      float: left;
      position: relative;
      z-index: 3;
      transition: $menu-item-transition;
      border-bottom: $menu-item-border;
      height: inherit;
      line-height: inherit;
      //子菜单
      ul{
        &.#{$dropdown-prefix-cls}__menu{
          margin-top: 0;
          min-width: 100%;
        }
        li{
          float: none;
          line-height: $menu-vertical-height;
          border-bottom: none;
        }
      }
    }
    #{$root}__item,
    #{$root}__submenu-title{
      & > i {
        font-size: $menu-horizontal-item-icon-font-size;
      }
    }
  }

  //竖直菜单
  &--vertical {
    @extend %transparent-scroll;
    &:after {
      width: 1px;
      height: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    #{$root}__item,
    #{$root}__submenu-title{
      line-height: $menu-vertical-height;
      white-space: nowrap;
      position: relative;
    }

    #{$root}__item{
      border-right: $menu-item-border;
    }

    //子菜单
    #{$root}__submenu{
      #{$root}__item{
        padding-left:$menu-vertical-padding-x + $menu-item-icon-font-size + $menu-item-icon-space-x;
      }
      //展示在右边的子菜单
      &.dropright {
        position: relative;
        ul{
          position: absolute;
          top: 0;
          left: 100%;
          margin-left: -1px;
          right: auto;
          #{$root}__item{
            padding-left: $menu-vertical-padding-x;
            border-right:none;
          }
        }
        & > #{$root}__submenu-title > #{$root}__submenu-title-icon:before {
          transform: rotate(-90deg);
        }
      }
    }

    //折叠状态
    &#{$root}--folded {
      >li,
      #{$root}__submenu-title {
        width: $menu-vertical-padding-x*2 + $menu-folded-item-icon-font-size;
        height: $menu-folded-vertical-height;
        line-height: $menu-folded-vertical-height;
        i {
          font-size: $menu-folded-item-icon-font-size;
        }
        &-icon{
          display: none;
        }
        span{
          display:none;
        }
      }
    }
  }

    //浅色默认
    &--light {
      @include theme($menu-bg,$menu-border-color, $menu-item-color, $menu-item-hover-color, $menu-item-hover-bg, $menu-item-active-color, $menu-item-active-bg, $menu-item-active-border-color,$submenu-bg,$menu-item-group-color);
      /*
      * 水平模式下 一级菜单 悬浮与选中为
      * 背景透明，文字主色,加3px主色下边框
      */
      &#{$root}--horizontal{
        //悬浮
        >#{$root}__item,
        >#{$root}__submenu,
        >#{$root}__submenu>#{$root}__submenu-title{
          @include hover-focus{
            background-color: $menu-light-horizontal-item-hover-bg;
            color:$menu-light-horizontal-item-hover-color;
            border-bottom-color: $menu-item-active-border-color;
          }
        }
        //选中
        >#{$root}__item--checked,
        >#{$root}__submenu--checked,
        >#{$root}__submenu--checked>#{$root}__submenu-title{
          background-color: $menu-light-horizontal-item-hover-bg;
          background-image: none;
          color:$menu-light-horizontal-item-hover-color;
          border-bottom-color: $menu-item-active-border-color;
        }

        .menu--open > .menu__submenu-title{
          background-color: transparent;
        }
      }
    }

    //深色
    &--dark {
      @include theme($menu-dark-bg,$menu-dark-border-color, $menu-dark-item-color, $menu-dark-item-hover-color, $menu-dark-item-hover-bg, $menu-dark-item-active-color, $menu-dark-item-active-bg, $menu-dark-item-active-border-color,$menu-dark-submenu-bg,$menu-dark-item-group-color);
      &#{$root}--horizontal {
        >#{$root}__item--checked,
        >#{$root}__submenu--checked {
          border-bottom-color: transparent;
        }
      }
    }

    &--ghost {
      @include theme($menu-ghost-bg,$menu-ghost-border-color, $menu-ghost-item-color, $menu-ghost-item-hover-color, $menu-ghost-item-hover-bg, $menu-ghost-item-active-color, $menu-ghost-item-active-bg, $menu-ghost-item-active-border-color,$menu-ghost-submenu-bg,$menu-ghost-item-group-color);
      //幽灵垂直向右展开模式 子菜单与浅色菜单保持一致
      .#{$dropdown-prefix-cls}__menu{
        background: $white;

        .menu__submenu-title,
        .menu__item{
          color:$menu-item-color;
          //菜单项悬浮状态
          @include hover-focus {
            color:$menu-item-hover-color;
            background-color: $menu-item-hover-bg;
          }
        }

        //菜单项选中状态
        #{$root}__item--checked,
        #{$root}__submenu--checked #{$root}__submenu-title {
          color:$menu-item-active-color;
          background-color:$menu-item-active-bg;
        }

        #{$root}__item-group{
          &-title {
            color:$menu-item-group-color;
          }
        }

        .menu--open.dropright > .menu__submenu-title{
          background-color: $menu-item-hover-bg;
        }

      }

    }


  //disabled
  .menu__item{
    @include status-disabled;
  }

}


