@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@import "common/transition";

@include b(menu) {
  list-style: none;
  position: relative;
  margin: 0;
  @include menu-dark-bg-color;
  @include utils-clearfix;
  li{
    list-style: none;
    cursor: pointer;
    position: relative;
  }
  li:focus{
    outline: none;
  }
  // 侧导航
  @include m(vertical) {
    width: 200px;
    height: 100vh;
    .xb-menu-logo, .xb-menu-append{
      display: none;
    }
    li{
      color:$--color-white;
      padding: 0;
      line-height: $--menu-vertical-height;
    }
    i:not(.xb-submenu__icon-arrow){
      font-size: $--font-size-base + 2px;
      margin-right: 5px;
      margin-top: 1px;
    }
    .xb-submenu__icon-arrow {
      float: right;
      line-height: inherit;
      transition: transform .3s;
      padding:0 15px;
      color: $--color-white;
    }
    .xb-submenu{
      .xb-menu-item{
        height: $--menu-vertical-height;
      }
      @include when(opened) {
        > .xb-submenu__title .xb-submenu__icon-arrow {
          transform: rotateZ(180deg);
        }
      }
    }
    & > .xb-menu-item{
      height: $--menu-vertical-height;
    }
    .xb-menu-item{
      @include when(active) {
        @include menu-dark-vertical-item-active-bg-color;
        &:before{
          content: '';
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width:4px;
          background-color:$--color-white;
        }
      }
    }
  }
  // 水平导航条
  @include m(horizontal) {
    padding: 0 30px;
    & > .xb-menu-item {
      float: left;
      height: $--menu-horizontal-height;
      line-height: $--menu-horizontal-height;
      margin: 0;
      color: rgba(255,255,255,0.65);
      a{
        color: rgba(255,255,255,0.65);
      }
      &:focus,
      &:hover {
        color: $--color-white;
      }
      a:hover {
        color: $--color-white;
      }
    }
    & > .xb-submenu {
      float: left;

      &:focus,
      &:hover {
        .xb-submenu__title {
          color: $--color-white;
        }
      }

      &.is-active {
        .xb-submenu__title {
          color: $--color-white;
        }
      }

      & .xb-submenu__title {
        height: $--menu-horizontal-height;
        line-height: $--menu-horizontal-height;
        border-bottom: 2px solid transparent;
        color: $--color-text-secondary;
      }
      .xb-submenu__icon-arrow {
        display: none;
      }
    }
    .xb-menu-logo{
      float: left;
      color:$--color-white;
      padding: 16px 10px;
      cursor: default;
      & > div{
        width: 120px;
        height: 32px;
        line-height: 32px;
        border-radius:2px;
        text-align: center;
        img{
          vertical-align: middle;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .xb-menu-append{
      float: right;
      height: $--menu-horizontal-height;
      line-height: $--menu-horizontal-height;
      color: rgba(255,255,255,0.85);
      cursor: default;
    }
    .xb-submenu, .xb-menu-item{
      padding: 0 28px;
    }
  }
  @include m(light){
    border-right:2px solid $--color-text-hr;
    [data-theme*="-symbol"] & {
      background-color: $--color-white;
    }
    li{
      background-color: $--color-white;
      [data-theme*="-symbol"] & {
        color: $--color-black-65;
      }
    }
    .xb-menu-item{
      @include when(active) {
        @include select-option-hover-bg;
        @include theme-font-color;
        &:after{
          content: '';
          display: inline-block;
          position: absolute;
          right: -2px;
          top: 0;
          height: 100%;
          width:2px;
          @include theme-bg-color;
        }
      }
    }
    .xb-submenu{
      @include when(active) {
        > .xb-submenu__title {
          color: $--color-black-85;
          font-weight: $--font-weight-base;
          i{
            color: $--color-black-65;
          }
        }
      }
    }
  }
  // 横向导航条的次级菜单
  @include m(popup) {
    z-index: 100;
    width: 160px;
    border: none;
    padding: 5px 0;
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:0px 0px 4px 4px;
    [data-theme*="-symbol"] & {
      background-color: $--color-white;
    }

    & > .xb-menu-item {
      background-color:$--color-white;
      color:rgba(89,89,89,0.65);
      height: $--submenu-horizontal-height;
      line-height: $--submenu-horizontal-height;
      padding:0 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      @include when(active){
        @include select-option-hover-bg;
        @include theme-font-color;
      }
    }

    &-bottom-start {
      margin-top: -1px;
    }
    &-right-start {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
@include b(menu-item) {
  height: $--menu-horizontal-height;
  line-height: $--menu-horizontal-height;
  font-size: $--font-size-base;
  color: rgba(255,255,255,0.65);
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color .3s, background-color .3s, color .3s;
  box-sizing: border-box;
  white-space: nowrap;
  * {
    vertical-align: middle;
  }
  @include when(active) {
    color: $--color-white;
  }
}