.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;
      white-space: nowrap;
      //菜单项为超链接时覆盖<a>默认样式
      a{
        display: block;
        color:inherit;
        font-size:inherit;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &  i {
        margin-right: 6px;
        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-left: 24px;
        &-icon {
          opacity: 1;
          &:before {
            @extend %aid-icon;
            content: '\F292';
            transition: $menu-item-transition;
          }
        }
      }
      //菜单打开时 箭头图标逆时针旋转180度
      &#{$root}--open {
        & > #{$root}__submenu-title > #{$root}__submenu-title-icon:before {
          transform: rotate(-180deg);
        }
      }
    }
    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-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;
      }
    }

    .dropdown__menu {
      padding: 0;
    }
    //横向菜单
    &--horizontal {
      height: $menu-horizontal-height;
      line-height: $menu-horizontal-height;
      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;
        }
      }
      #{$root}__item--checked{
        font-weight: 600
      }
      #{$root}__submenu-title:hover{
        font-weight: 600
      }
      #{$root}__item:hover{
        font-weight: 600
      }
      .dropdown__menu {
        #{$root}__item {
          height: 40px;
          line-height: 40px;
          color: $gray;
          @include hover-focus {
            background: transparent;
            color: $brand-primary
          }
        }
        #{$root}__item--checked {
          color: #fff;
            background: $brand-primary;
          @include hover-focus {
            color: #fff;
            background: $brand-primary;
          }
        }
      }
    }
    //竖直菜单
    &--vertical {
      @extend %transparent-scroll;
      &:after {
        width: 1px;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      li {
        margin: 4px 0;
        .menu__submenu-title {
          span {
            width: 130px;
            margin-right: auto;
          }
        }
      }
      #{$root}__item,
      #{$root}__submenu-title{
        line-height: $menu-vertical-height;
        white-space: nowrap;
        position: relative;
      }
      #{$root}__item{
        border-right: $menu-item-border;
      }
      > li > ul > .menu__item,
      > li > ul > .menu__submenu:not(.dropright) .menu__submenu-title {
        &::before {
          width: 6px;
          content: "";
          height: 2px;
          background-color: #FFF;
          margin: 0 8px 0 5px;
        }
      }
      .second-submenu .menu__item {
        padding-left:$menu-vertical-padding-x + $menu-item-icon-font-size + 2*$menu-item-icon-space-x;
      }
      //子菜单
      #{$root}__submenu{
        //展示在右边的子菜单
        &.dropright {
          position: relative;
          ul{
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: -1px;
            right: auto;
            #{$root}__item{
              &::before {
                display: none
              }
              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 > #{$root}__submenu-title {
          width: 64px;
          height: $menu-folded-vertical-height;
          line-height: $menu-folded-vertical-height;
          >.menu__submenu-title-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-active-bg;
            background-image: none;
            color:$menu-light-horizontal-item-active-color;
            border-bottom-color: $menu-item-active-border-color;
            @include hover-focus{
              background-color: $menu-light-horizontal-item-active-bg;
              color:$menu-light-horizontal-item-active-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 {
          background-color: #2B2C3A;
          //悬浮
          >#{$root}__item,
          >#{$root}__submenu,
          >#{$root}__submenu>#{$root}__submenu-title{
            @include hover-focus{
              background-color: transparent;
            }
          }
          >#{$root}__item--checked,
          >#{$root}__submenu--checked {
            @include hover-focus{
              background-color: $menu-dark-item-active-bg;
            }
            border-bottom-color: transparent;
          }
          .dropdown__menu {
            #{$root}__item {
              color: rgba(255,255,255,.8);
              @include hover-focus {
                background: transparent;
                color: #fff;
              }
            }
            #{$root}__item--checked {
              color: #fff;
              @include hover-focus {
                background: $brand-primary;
                color: #fff;
              }
            }
          }
        }
        &#{$root}--vertical {
          .menu--open > .menu__submenu-title {
            color: $white;
          }
          .menu__submenu--checked > .menu__submenu-title {
            color: #fff;
            background: $menu-dark-bg;
          }
        }
      }
      &--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);
        //幽灵垂直向右展开模式 子菜单与浅色菜单保持一致
        &#{$root}--horizontal {
          //悬浮
          >#{$root}__item,
          >#{$root}__submenu,
          >#{$root}__submenu>#{$root}__submenu-title{
            @include hover-focus{
              background-color: transparent;
            }
          }
          >#{$root}__item--checked,
          >#{$root}__submenu--checked {
            @include hover-focus{
              background-color: $menu-ghost-item-active-bg;
            }
          }
        }
        .menu--open .dropdown__menu {
          background: #fff;
        }
        .#{$dropdown-prefix-cls}__menu{
          .menu--open.dropright > .menu__submenu-title{
            background-color: $menu-item-hover-bg;
          }
        }
      }
    //disabled
    .menu__item{
      @include status-disabled
    }
  }

.menu--vertical .menu__vertical .menu__vertical li {
  padding-left: 56px;
}

.menu-fold-icon {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 2px;
    background-color: rgba(255, 255, 255, .65);
    top: 11.5px;
    left: 50%;
    margin-left: -7px;
  }

  &::after {
    top: 16.5px;
  }
}

.layout-sidebar > .d-block {
  overflow: hidden;
  height: 30px;

  &:hover {
    background-color: rgba(0,0,0,.1);
  }
}

.layout-sidebar--folded .menu-fold-icon {
  transform: rotate(90deg);
}