.nav-leaf {
  width: 110px;
  height:  100%;
  & * {
    box-sizing: border-box;
  }
  &.nav-leaf-horizontal {
    width: 100%;
    .nav-leaf-container.nav-leaf-container-scroll {
        padding: 0 30px;
    }
  }
  //.nav-leaf-container {
  //  height: ~'calc(100vh - @{nav-header-height})';
  //}

  .nav-leaf-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    //height: calc(100% - 32px);
    margin-bottom: -1px;
    font-size: 16px;
    overflow: hidden;
    line-height: 1.6;
    white-space: nowrap;
    //transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    zoom: 1;
    &.nav-leaf-container-scroll {
      padding: 32px 0;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .nav-leaf-wrap {
    height: 100%;
    overflow: hidden;
  }
  &.nav-leaf-horizontal {
    .nav-leaf-item {
      display: inline-block;
      text-align: center;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    }
    .nav-leaf-nav {
      width: inherit;
    }
  }
  .nav-leaf-nav {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-left: 0;
    //transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .nav-leaf-arrow {
    position: absolute;
    width: 100%;
    height: 32px;
    //color: @text-color;
    text-align: center;
    cursor: pointer;
    //&:hover {
    //  color: @primary-color;
    //}
    &.is-hide {
      display: none;
    }
    &.is-disabled {
      //color: fade(@primary-color, 30%) !important;
      cursor: not-allowed !important;
    }
    &.nav-leaf-btn-left {
      width: 30px;
      height: auto;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    &.nav-leaf-btn-right{
      width: 30px;
      height: auto;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    &.nav-leaf-btn-prev {
      top: 0;
      left:0;
    }
    &.nav-leaf-btn-next {
      bottom: 0;
      left:0;
    }
  }
  .nav-leaf-item {
    height: 40px;
    padding: 5px 10px 5px 10px;
    //color: @text-color-secondary;
    line-height: 30px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    //&:hover {
    //  color: @primary-color;
    //}
    //&.is-active {
    //  color: @primary-color;
    //  background: @background-color-base;
    //  border-color: @primary-color;
    //}
    .leaf-title {
      display: inline-block;
      min-width: 30px;
    }
    .leaf-extra {
      position: relative;
      display: inline-block;
      width: 18px;
      margin-left: 4px;
      //color: @error-color;
      text-align: center;
      //i {
      //  color: @error-color;
      //}
      .warning-count {
        position: absolute;
        top: -1px;
        left: 20px;
        .ant-badge-multiple-words {
          //box-shadow: 0 1px 4px fade(@primary-color, 45%)
        }
      }
    }
  }
  .nav-leaf-empty {
    position: absolute;
    top: -25px;
    left: -10px;
    width: 100%;
  }
}
.themeTech {
  .nav-leaf .nav-leaf-item.is-active {
    background: #10343A;
  }
}