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

  &-tabs {
    &#{root}--light {
      background: none;
    }
  }

  &--horizontal {
    #{root}__item {
      float: left;
      margin: 0;
      padding: 0;

      &:first-child #{$root}-link {
        &::before {
          display: none;
        }
      }

      &#{root}__rest {
        padding: 0;
      }

      &:hover {
        border-bottom: 2px solid transparent;
      }

      #{$root}-link {
        i {
          margin: 0;
        }
      }
    }

    // .navs__item--checked {
    //   border-bottom: 2px solid $brand-primary;
    // }
  }

  &__vertical {
    overflow: hidden;
    transition: max-height .3s;

    #{root}__item {
      &:hover {
        height: 100%;
        box-sizing: border-box;
      }
    }
  }

  //菜单边框
  &::after {
    position: absolute;
    display: block;
    content: "";
    background-color: $navs-border-color;
  }

  #{$root}__item {
    display: flex;
    align-items: center;
    font-size: $navs-item-font-size;
    cursor: pointer;
    position: relative;

    //菜单项为超链接时覆盖<a>默认样式
    a {
      display: block;
      overflow: hidden;
      font-size: inherit;
      color: inherit;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & i {
      margin-right: $navs-item-icon-space-x;
      font-size: $navs-item-icon-font-size;
      letter-spacing: 0;
    }

    &#{$root}__subitem {
      z-index: 111
    }

    &#{$root}__rest {
      width: 50px;
      padding: 0;
      justify-content: center;
      position: relative;
      cursor: pointer;
    }

    #{$root}__space {
      position: absolute;
      top: 40px;
      left: 0;
      height: 4px;
      width: 100%;
    }

    #{$root}__slots {
      position: absolute;
      top: 60px;
      left: 0;
      top: 64px;
      padding: 0 10px;
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .08);
      border: 1px solid #eee;
      border-radius: 5px;
      background: #fff;
      z-index: 11;
      color: $black;
      white-space: nowrap;
    }
  }

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

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

  //横向菜单
  &--horizontal {
    height: $navs-horizontal-height;
    line-height: $navs-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: $navs-item-border;
      transition: $navs-item-transition;

      //子菜单
      ul {
        &.#{$dropdown-prefix-cls}__navs {
          min-width: 100%;
          margin-top: 0;
        }

        li {
          float: none;
          line-height: $navs-vertical-height;
          border-bottom: none;
        }
      }
    }

    #{$root}__item {
      &>i {
        font-size: $navs-horizontal-item-icon-font-size;
      }
    }
  }

  //竖直菜单
  &--vertical {
    @extend %transparent-scroll;

    #{$root}-link {
      padding: 0;
    }

    &::after {
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      width: 1px;
      height: 100%;
    }

    #{$root}__item {
      position: relative;
      line-height: $navs-vertical-height;
      white-space: nowrap;
      padding: 0 20px 0 24px;

      & i {
        margin-right: 8px;
      }
    }

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

  }

  //浅色默认
  &--light {
    @include nav-theme($navs-bg, $navs-border-color, $navs-item-color, $navs-item-hover-color, $navs-item-hover-bg, $navs-item-active-color, $navs-item-active-bg, $navs-item-active-border-color, $submenu-bg, $navs-item-group-color);

    /*
      * 水平模式下 一级菜单 悬浮与选中为
      * 背景透明，文字主色,加3px主色下边框
      */
    &#{$root}--horizontal {
      //悬浮
      >#{$root}__item {
        padding: 0 12px;
        margin-right: 24px;
        &:last-child{
          margin-right: 0;
        }
        @include hover-focus {
          color: $navs-light-horizontal-item-hover-color;
          background-color: $navs-light-horizontal-item-hover-bg;
          border-bottom-color: $navs-item-active-border-color;
        }
      }

      color: $navs-light-horizontal-item-hover-color;
      background-color: $navs-light-horizontal-item-hover-bg;
      background-image: none;
      border-bottom-color: $navs-item-active-border-color;
    }
  }


  //深色
  &--dark {
    @include nav-theme($navs-dark-bg, $navs-dark-border-color, $navs-dark-item-color, $navs-dark-item-hover-color, $navs-dark-item-hover-bg, $navs-dark-item-active-color, $navs-dark-item-active-bg, $navs-dark-item-active-border-color, $navs-dark-submenu-bg, $navs-dark-item-group-color);

    &#{$root}--horizontal {
      #{$root}__item {
        padding: 0 12px;
        margin-right: 24px;
        &:last-child{
          margin-right: 0;
        }
        color: $white;
        &#{$root}__item--checked{
          color: $brand-primary;
          background: none;
        }
        &:hover{
          color: $brand-primary;
          background: none;
          border-bottom-color: $brand-primary;
        }
        #{$root}-link {
          padding: 0 20px;
        }
      }
      >#{$root}__item--checked {
        // border-bottom-color: transparent;
        // background-color: $brand-primary;
        color: $brand-primary;
        background: none;
      }
    }

    &#{$root}--vertical {
      >#{$root}__item--checked {
        border-bottom-color: transparent;
        background-color: $brand-primary
      }
    }
  }

  &--ghost {
    @include nav-theme($navs-ghost-bg, $navs-ghost-border-color, $navs-ghost-item-color, $navs-ghost-item-hover-color, $navs-ghost-item-hover-bg, $navs-ghost-item-active-color, $navs-ghost-item-active-bg, $navs-ghost-item-active-border-color, $navs-ghost-submenu-bg, $navs-ghost-item-group-color);

    //幽灵垂直向右展开模式 子菜单与浅色菜单保持一致
    .#{$dropdown-prefix-cls}__navs {
      background: $white;

      #{$root}__item{
        margin: 0;
        //菜单项悬浮状态
        @include hover-focus {
          color: $navs-item-hover-color;
          background-color: $navs-item-hover-bg;
        }

        color: $navs-item-color;
      }

      //菜单项选中状态
      #{$root}__item--checked {
        color: $navs-item-active-color;
        background-color: $navs-item-active-bg;
        border-bottom-color: transparent;
      }
    }

    &#{$root}--horizontal {
      #{$root}__item {
        padding: 0 12px;
        margin-right: 24px;
        &:last-child{
          margin-right: 0;
        }
        .navs-link {
          padding: 0 20px;
        }
      }
    }
  }


  //disabled
  &__item {
    @include status-disabled;
  }
  &-link {
    @include hover-focus {
      text-decoration: none;
    }

    display: block;
    padding: 0 12px;

    // Disabled state lightens text and removes hover/tab effects
    &.disabled {
      color: $navs-link-disabled-color;
      cursor: $cursor-disabled;
    }
  }
  &-fill {
    #{$root}__item {
      flex: 1 1 auto;
      text-align: center;
    }
  }
  &-justified {
    #{$root}__item {
      flex-basis: 0;
      flex-grow: 1;
      text-align: center;
    }
  }
}

.mod-rest {
  list-style-type: none;
  padding: 0;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .08);
  // border: 1px solid #eee;
  border-radius: 5px;
  min-width: 150px;
  background: $white;

  .#{$navs-prefix-cls}__item {
    width: 100%;
    margin: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: $navs-item-font-size;
    cursor: pointer;
    height: 40px;
    line-height: 40px;

    i {
      margin-right: 4px;
    }

    &:hover {
      border: none;
      color: $brand-primary;
      background-color: $brand-primary-10;
    }
  }
  &__dark {
    background-color: $navs-dark-bg;
    color: $navs-dark-item-active-color;
    margin: 0;
  }
}