$tabs-prefix-cls: "#{$css-prefix}tabs";

.#{$tabs-prefix-cls} {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: $text-color;

  @include clearfix();

  &-bar {
    outline: none;
    border-bottom: 1px solid #e6e6e6;//**************************************88
    margin-bottom: $tabs-bar-margin-bottom;
  }

  &-ink-bar {
    height: $tabs-ink-bar-height;
    box-sizing: border-box;
    background-color: $primary-color;
    position: absolute;
    left: 0;
    bottom: 1px;
    z-index: 1;
    transition: transform 0.3s $ease-in-out;
    transform-origin: 0 0;
  }

  &-bar-top {
    border-top: 1px solid $border-color-base;
    margin-bottom: $tabs-bar-top-margin-bottom;
    // margin-top: -1px;
  }

  &-nav-container {
    margin-bottom: -1px;
    line-height: $line-height-base;
    font-size: $font-size-base;
    box-sizing: border-box;
    white-space: nowrap;
    // overflow: hidden;
    position: relative;

    @include clearfix();
  }

  &-nav-container-scrolling {
    padding-left: $tabs-nav-container-scrolling-padding-left;
    padding-right: $tabs-nav-container-scrolling-padding-right;
  }

  &-return {
    float: left;
    height: $tabs-return-height;
    padding: $tabs-return-padding;
  }

  &-enter {
    float: right;
    height: $tabs-enter-height;
    padding: $tabs-enter-padding;
  }

  &-return,
  &-enter:hover {
    cursor: pointer;

    i {
      color: $primary-color;
    }
  }

  &-nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
  }

  &-nav-wrap-width {
    width: $tabs-nav-wrap-width;
  }

  &-nav-scroll {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
  }

  &-nav-right {
    display: inline-block;
    transition: transform 0.5s $ease-in-out;
    padding-top: $tabs-nav-right-padding-top;
    padding-right: $tabs-nav-right-padding-right;

    .h-tabs-tab {
      width: $tabs-nav-right-tabs-tab-width;
      height: $tabs-nav-right-tabs-tab-height;
      line-height: $tabs-nav-right-tabs-tab-line-height;
      text-align: right;
      position: relative;
      padding: $tabs-nav-right-tabs-tab-padding;

      i {
        color: transparent;
        position: absolute;
        right: 0;
        margin-right: $tabs-nav-right-tabs-tab-i-margin-right;
      }
    }

    .h-tabs-tab-alginleft {
      text-align: left;
    }

    .h-tabs-tab:hover {
      background: none;//*******************************
      color: $primary-color;//*******************************
      cursor: pointer;

      i {
        color: transparent;//*******************************
      }
    }

    .h-tabs-tab-active {
      background: $primary-color;
      color: $tabs-tab-nav-right-active-color;
      font-weight: bold;

      i {
        color: $primary-color;
      }
    }

    .h-tabs-tab-active:hover {
      background: $primary-color;
      color: $tabs-tab-nav-right-active-color;

      i {
        color: $primary-color;
      }
    }
  }

  &-nav {
    // position:absolute;
    display: inline-block;
    padding-left: 0;
    list-style: none;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.5s $ease-in-out;

    &::before,
    &::after {
      display: table;
      content: " ";
    }

    &::after {
      clear: both;
    }

    .#{$tabs-prefix-cls}-tab {
      display: inline-block;
      height: $tabs-tab-height;
      padding: $tabs-tab-padding;
      margin-right: $tabs-tab-margin-right;
      box-sizing: border-box;
      cursor: pointer;
      text-decoration: none;
      position: relative;
      transition: color 0.3s $ease-in-out;
      font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      font-size: $tabs-tab-font-size;
      color: $tabs-nav-tab-color;
      letter-spacing: 0;
      text-align: left;
      line-height: $tabs-tab-line-height;

      &:hover {
        color: $tabs-tab-hover-color;//
      }

      &:active {
        color: $primary-color;//****
      }

      &-active {
        color: $primary-color;//**
      }
      .#{$css-prefix-iconfont} {
        width: $tabs-tab-iconfont-width;
        height: $tabs-tab-iconfont-height;
        margin-right: $tabs-tab-iconfont-margin-right;
      }

      i {
        font-size: $tabs-tab-font-size;
      }
    }
    .#{$tabs-prefix-cls}-tab-disabled {
      pointer-events: none;
      cursor: default;
      font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      font-size: $tabs-tab-font-size;
      color: $tabs-tab-disabled-color;
      letter-spacing: 0;
      text-align: left;
      line-height: $tabs-tab-disabled-line-height;
    }
  }

  &-mini &-nav-container {
    font-size: $font-size-base;
  }

  &-mini &-tab {
    margin-right: 0;
    padding: $tabs-mini-tab-padding;
    font-size: $font-size-small;
  }

  .#{$tabs-prefix-cls}-content-animated {
    display: flex;
    flex-direction: row;
    will-change: transform;
    transition: transform 0.3s $ease-in-out;
  }

  .#{$tabs-prefix-cls}-tabpane {
    flex-shrink: 0;
    width: 100%;
    transition: opacity 0.3s;
    opacity: 1;
    overflow: auto;
  }

  .#{$tabs-prefix-cls}-tabpane-inactive {
    opacity: 0;
    height: 0;
  }

  // card style
  &.#{$tabs-prefix-cls}-card &-tab {
    font-size: 12px;//********************************
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-nav-container,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-nav-container {
    height: $tabs-card-bar-top-nav-container-height;
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-nav-container {
    margin-top: -1px;
    margin-bottom: 0;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-ink-bar,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-ink-bar {
    visibility: hidden;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab, &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab {
    margin: $tabs-card-bar-top-tab-margin;
    margin-right: $tabs-card-bar-top-tab-margin-right;
    height: $tabs-card-bar-top-tab-height;
    padding: $tabs-card-bar-top-tab-padding;
    border: 1px solid #e6e6e6;//********************************
    border-bottom: 0;
    border-radius: $btn-border-radius $btn-border-radius 0 0;
    transition: all 0.3s $ease-in-out;
    background: $table-thead-bg;

    &:not(:last-child) {
      margin-right: -2px;//去除卡片间的线*******************************8
    }
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab {
    border-bottom: 1px solid $border-color-base;
    border-radius: 0 0 $btn-border-radius $btn-border-radius;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab-active {
    height: $tabs-card-bar-tab-active-height;
    padding-bottom: $tabs-card-bar-tab-active-padding-bottom;
    background: $tabs-bar-active-background;
    transform: translateZ(0);
    border-color: $tabs-bar-active-border-color;
    color: $tabs-bar-active-color;
  }


  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab-active {
    height: $tabs-card-top-bar-top-tab-active-height;
    padding-bottom: $tabs-card-top-bar-top-tab-active-padding-bottom;
    background: $tabs-card-top-bar-top-tab-active-background;
    transform: translateZ(0);
    border-color: $border-color-base;
    color: $primary-color;
    border-top: 1px solid transparent;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-nav-wrap {
    margin-bottom: 0;
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab .#{$css-prefix-iconfont}-ios-close-empty,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab .#{$css-prefix-iconfont}-ios-close-empty {
    width: $tabs-card-bar-tab-ios-close-empty-width;
    height: $tabs-card-bar-tab-ios-close-empty-height;
    font-size: $tabs-card-bar-tab-ios-close-empty-font-size;
    margin-right: $tabs-card-bar-tab-ios-close-empty-margin-right;
    color: $legend-color;
    text-align: right;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: -1px;
    transform-origin: 100% 50%;
    transition: all 0.3s $ease-in-out;

    &:hover {
      color: $tabs-card-bar-tab-ios-close-empty-hover-color;
    }
  }

  // &.#{$tabs-prefix-cls}-card > &-bar &-tab-active .#{$css-prefix-iconfont}-ios-close-empty,
  // &.#{$tabs-prefix-cls}-card > &-bar &-tab:hover .#{$css-prefix-iconfont}-ios-close-empty,
  // &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab-active .#{$css-prefix-iconfont}-ios-close-empty,
  // &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab:hover .#{$css-prefix-iconfont}-ios-close-empty {
  //   // ssform: translateZ(0);
  // }

  &-panel-right {
    width: 100%;
    .#{$tabs-prefix-cls}-content-animated {
      display: flex;
      flex-direction: column;
      will-change: transform;
      transition: transform 0.3s $ease-in-out;
    }
  }

  &-bar-right {
    float: left;
    .#{$tabs-prefix-cls}-nav-right {
      display: block;
    }
  }

  &-content-right {
    float: left;
    border-left: 1px solid $border-color-base;

    .h-tabs-tabpane {
      padding: 10px 20px;
    }
  }
}

.#{$tabs-prefix-cls}-no-animation {
  > .#{$tabs-prefix-cls}-content {
    transform: none !important;

    > .#{$tabs-prefix-cls}-tabpane-inactive {
      display: none;
    }
  }
}