.ht-base-tabs {
  .ivu-tabs-nav-prev {
    line-height: 12px;
    top: 14px;
    .ht-base-LiRa_left:before {
      font-size: 10px;
    }
  }
  .ivu-tabs-nav-next {
    line-height: 12px;
    top: 14px;
    .ht-base-LiRa_right:before {
      font-size: 10px;
    }
  }
  .ivu-tabs-nav {
    height: 40px;
    .ivu-tabs-ink-bar {
      background-color: @primary-color;
    }
    .ivu-tabs-tab {
      color: @text-color;
      margin-right: 4px;
      padding: 10px 16px;
      &:hover {
        color: @primary-5;
      }
      .ivu-badge {
        margin-left: 3px;
      }
    }
    .ivu-tabs-tab-disabled {
      color: @disabled-color;
    }
    .ivu-tabs-tab-active {
      color: @primary-color;
    }
  }
  .ivu-tabs-nav-container {
    color: @title-color;
  }
  &.ivu-tabs.ivu-tabs-card {
    & > .ivu-tabs-bar {
      .ivu-tabs-nav-container {
        height: 40px;
        &:focus {
          .ivu-tabs-tab-focused {
            border-color: @border-color-base !important;
          }
        }
      }
      .ivu-tabs-tab {
        line-height: 20px;
        height: 40px;
        padding: 10px 16px;
        border-bottom: 1px solid @border-color-base;
        &.ivu-tabs-tab-active {
          border-bottom: none;
        }
        .ivu-tabs-close {
          width: 12px;
          font-size: 12px;
        }
      }
      .ivu-tabs-nav-right {
        line-height: 40px;
      }
      .ivu-tabs-tab-active .ivu-tabs-close, .ivu-tabs-tab:hover .ivu-tabs-close {
        font-size: 12px;
        width: 12px;
        margin-right: 0;
      }
    }
  }
  &.ht-base-tabs-style1, &.ht-base-tabs-style2 {
    background: #fff;
    .ivu-tabs-bar {
      border-bottom: 0;
      background: none;
      margin-bottom: 0;
    }
    .ivu-tabs-content {
      .ivu-tabs-tabpane {
        padding: 16px;
        //background: #fff;
      }
    }
    &.ivu-tabs.ivu-tabs-card {
      & > .ivu-tabs-bar .ivu-tabs-tab {
        border: none;
        &.ivu-tabs-tab-active {
          background: #fff;
        }
      }
    }
  }
  &.ht-base-tabs-style1 {
    .ivu-tabs-bar {
      background: #e3e8ee;
    }
    &.ivu-tabs.ivu-tabs-card {
      & > .ivu-tabs-bar .ivu-tabs-tab {
        background: #f5f5fc;
      }
    }
  }
  &.ht-base-tabs-style2 {
    .ivu-tabs-bar {
      background: #f5f5f5;
    }
    &.ivu-tabs.ivu-tabs-card {
      & > .ivu-tabs-bar .ivu-tabs-tab {
        background: none;
      }
    }
  }
  &.ht-base-tabs-left {
    display: flex;
    & .ivu-tabs-bar {
      border-bottom: none;
      margin-bottom: 0;
      border-right: 1px solid @border-color-base;
      & .ivu-tabs-nav {
        height: auto;
        & .ivu-tabs-ink-bar {
          width: 2px!important;
          height: 41px;
          right: 0;
          top: 0;
          bottom: auto;
          left: auto;
        }
        & .ivu-tabs-tab {
          display: block;
          margin-right: 16px;
        }
      }
    }
    & .ivu-tabs-content {
      flex: 1;
      & .ivu-tabs-tabpane {
        padding-left: 24px;
      }
    }
  }
  &.ht-base-tabs-right {
    display: flex;
    & .ivu-tabs-bar {
      border-bottom: none;
      margin-bottom: 0;
      border-left: 1px solid @border-color-base;
      & .ivu-tabs-nav {
        height: auto;
        & .ivu-tabs-ink-bar {
          width: 2px!important;
          height: 41px;
          left: 0;
          top: 0;
          bottom: auto;
        }
        & .ivu-tabs-tab {
          display: block;
          margin-left: 16px;
        }
      }
    }
    & .ivu-tabs-content {
      flex: 1;
      & .ivu-tabs-tabpane {
        padding-right: 24px;
      }
    }
  }
  &.ht-base-tabs-bottom {
    & .ivu-tabs-bar {
      margin-top: 16px;
      border-top: 1px solid @border-color-base;
      border-bottom: none;
      & .ivu-tabs-ink-bar {
        top: 0;
      }
    }
  }
}
