.#{$menu-prefix-cls} {
  $root: #{&};
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;

  &#{$root}__vertical {
    overflow: hidden;
    transition: max-height .3s;
  }
  //菜单边框
  &::after {
    position: absolute;
    display: block;
    content: "";
    background-color: $menu-border-color;
  }

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

    & 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;
        top: 50%;
        right: $menu-vertical-padding-x;
        margin-right: 0 !important;
        font-size: 12px !important;
        transform: translate(0, -50%);
        &::before {
          @extend %aid-icon;
          content: "\F8BE";
          transition: $menu-item-transition;
        }
      }
    }

    & > ul#{$root} {
      //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 {
    padding: 0;
    border: none;
    list-style: none;
  }

  //item-group
  &__item-group {

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

    @include hover-focus {
      background-color: transparent !important;
    }
    line-height: normal;
    list-style: none;
    border: none !important;

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

    & > ul {
      padding-left: 0;
      list-style: none !important;

      li {
        white-space: nowrap;
      }
    }
  }

  //横向菜单
  &--horizontal {
    height: $menu-horizontal-height;
    line-height: $menu-horizontal-height;

    &::after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
    }

    li {
      position: relative;
      z-index: 3;
      float: left;
      height: inherit;
      line-height: inherit;
      border-bottom: $menu-item-border;
      transition: $menu-item-transition;
      //子菜单
      ul {
        &.#{$dropdown-prefix-cls}__menu {
          min-width: 100%;
          margin-top: 0;
        }

        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 {
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 1px;
      height: 100%;
    }

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

    #{$root}__item {
      border-right: $menu-item-border;
      @include status-disabled;
    }

    //子菜单
    #{$root}__submenu {
      #{$root}__item {
        padding-left: $menu-vertical-padding-x + $menu-item-icon-font-size + $menu-item-icon-space-x;
      }
      #{$root}__submenu {
        #{$root}__submenu-title {
          padding-left: $menu-vertical-padding-x + $menu-item-icon-font-size + $menu-item-icon-space-x;
        }
        #{$root}__item {
          padding-left: $menu-vertical-padding-x * 2 + $menu-item-icon-font-size + $menu-item-icon-space-x;
        }
      }
      //展示在右边的子菜单
      &.dropright {
        position: relative;

        ul {
          position: absolute;
          top: 0;
          right: auto;
          left: 100%;
          margin-left: 4px;
          z-index: 1;
          box-shadow: $dropdown-box-shadow;
          @include border-radius($border-radius);

          #{$root}__item,
          #{$root}__submenu-title {
            padding-left: $menu-vertical-padding-x;
            border-right: none;
          }
        }

        & > #{$root}__submenu-title > #{$root}__submenu-title-icon::before {
          transform: rotate(-90deg);
        }
      }
    }

    //折叠状态
    &#{$root}--collapse {
      width: 64px;
      > li,
      #{$root}__submenu-title {
        width: 100%;
        padding: 0;
        display: flex;
        justify-content: center;

        i {
          // font-size: $menu-folded-item-icon-font-size;
          margin-right: 0;
        }

        &-icon {
          display: none;
        }
      }
      > #{$root}__item > span {
        display: none;
      }
      > #{$root}__submenu > #{$root}__submenu-title {
        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 {
          color: $menu-light-horizontal-item-hover-color;
          background-color: $menu-light-horizontal-item-hover-bg;
          border-bottom-color: $menu-item-active-border-color;
        }
      }
      //选中
      > #{$root}__item--checked,
      > #{$root}__submenu--checked,
      > #{$root}__submenu--checked > #{$root}__submenu-title {
        color: $menu-light-horizontal-item-hover-color;
        background-color: $menu-light-horizontal-item-hover-bg;
        background-image: none;
        border-bottom-color: $menu-item-active-border-color;
      }

      #{$root}--open > #{$root}__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, $white);

    &#{$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;

      #{$root}__submenu-title,
      #{$root}__item {
        //菜单项悬浮状态
        @include hover-focus {
          color: $menu-item-hover-color;
          background-color: $menu-item-hover-bg;
        }
        color: $menu-item-color;
      }

      //菜单项选中状态
      #{$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;
        }
      }

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

  //transition
  &-opacity-transition {
    transition: opacity .3s cubic-bezier(.55,0,.1,1);
  }

}