// @import "../_utils.scss";
// @import "./icon.scss";

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

  @include theme-font-color($__tabs_font-color);
  @include clearfix();

  &-bar {
    outline: none;
    border-bottom: 1px solid $border-color-base;
    margin-bottom: $tabs-bar-margin-bottom;

    @include theme-border-bottom-color($__tabs-bar_border-bottom-color);
  }

  &-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;

    @include theme-background-color($__tabs-ink-bar_background-color);
  }

  &-bar-top {
    border-top: 1px solid $border-color-base;
    margin-bottom: $tabs-bar-top-margin-bottom;
    // margin-top: -1px;
    @include theme-border-top-color($__tabs-bar-top_border-top-color);
  }

  &-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;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4, 0);
      padding-right: 0;
    } @else {
      height: $tabs-return-height;
      padding: $tabs-return-padding;
    }
  }

  &-enter {
    float: right;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4, 0);
      padding-left: 0;
    } @else {
      height: $tabs-return-height;
      padding: $tabs-return-padding;
    }
  }

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

    i {
      color: $primary-color;

      @include theme-font-color($__tabs-return-i_font-color);
    }
  }

  &-nav-wrap {
    overflow: hidden;
    @if $--size-switch == no {
      margin-bottom: -1px;
    }
  }

  &-nav-wrap-width {
    @if $--size-switch == yes {
      width: calc(100% - #{(16px + $--size-offset-base) * 2});
    } @else {
      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;

    .#{$tabs-prefix-cls}-tab {
      width: $tabs-nav-right-tabs-tab-width;
      @if $--size-switch == yes {
        @include computed-height($--size-height-base, 0px);
        font-size: if($--size-height-base < 28, 12px, 14px);
      } @else {
        height: $tabs-nav-right-tabs-tab-height;
        line-height: $tabs-nav-right-tabs-tab-line-height;
        padding: $tabs-nav-right-tabs-tab-padding;
      }
      text-align: right;
      position: relative;

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

        @include theme-font-color($__tabs-nav-right-tab-i_font-color);
      }
    }

    .#{$tabs-prefix-cls}-tab-alginleft {
      text-align: left;
    }

    .#{$tabs-prefix-cls}-tab:hover {
      background: $border-color-base;
      cursor: pointer;

      @include theme-background-color($__tabs-nav-right-tab_hover_background);

      i {
        color: $border-color-base;

        @include theme-font-color($__tabs-nav-right-tab-i_hover_font-color);
      }
    }

    .#{$tabs-prefix-cls}-tab-active {
      background: $primary-color;
      color: $tabs-tab-nav-right-active-color;
      font-weight: bold;

      @include theme-font-color($__tabs-nav-right-tab_active_font-color);
      @include theme-background-color($__tabs-nav-right-tab_active_background);

      i {
        color: $primary-color;

        @include theme-font-color($__tabs-nav-right-tab-i_active_font-color);
      }
    }

    .#{$tabs-prefix-cls}-tab-active:hover {
      background: $primary-color;

      @include theme-background-color($__tabs-nav-right-tab_active_hover_background);

      i {
        color: $primary-color;

        @include theme-font-color($__tabs-nav-right-tab-i_active_hover_font-color);
      }
    }

    .#{$tabs-prefix-cls}-tab-disabled {
      color: $btn-disable-color;
      cursor: not-allowed;
      user-select: none;

      @include theme-font-color($__tabs-nav-right-tab_disabled_font-color);
    }

    .#{$tabs-prefix-cls}-tab-disabled:hover {
      background-color: transparent;

      @include theme-background-color($__tabs-nav-right-tab_disabled_background);
      cursor: not-allowed;

      i {
        color: transparent;

        @include theme-font-color($__tabs-nav-right-tab-i_disabled_font-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;
      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;
      color: $tabs-nav-tab-color;
      letter-spacing: 0;
      text-align: left;
      @if $--size-switch == yes {
        @include computed-line-height();
        padding: computed-padding-vertical($--size-height-base + 4, $--size-font-size-base, 0) $--size-height-base - 8;
        font-size: if($--size-height-base < 28, 12px, 14px);
      } @else {
        padding:$tabs-tab-padding;
        font-size: $tabs-tab-font-size;
        height: $tabs-tab-height;
        line-height: $tabs-tab-line-height;
      }

      @include theme-font-color($__tabs-nav-tab_font-color);

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

        @include theme-font-color($__tabs-nav-tab_hover_font-color);
      }

      &:active {
        color: $tabs-tab-hover-color;

        @include theme-font-color($__tabs-nav-tab_active_font-color);
      }
      .#{$css-prefix-iconfont} {
        width: $tabs-tab-iconfont-width;
        height: $tabs-tab-iconfont-height;
        margin-right: $tabs-tab-iconfont-margin-right;
      }

      i {
        @if $--size-switch == yes {
          vertical-align: top;
        }
        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;

      @include theme-font-color($__tabs-nav-tab_disabled_font-color);
    }


    .#{$tabs-prefix-cls}-tab-active {
      color: $tabs-tab-active-color;

      @include theme-font-color($__tabs-nav-tab-active_active_font-color);
    }
  }

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

  &-mini &-tab {
    margin-right: 0;
    @if $--size-switch == yes {
      font-size: 12px;
      padding: computed-padding-vertical($--size-height-base, $--size-font-size-base, 0) $--size-height-base - 8;
    } @else {
      padding: $tabs-mini-tab-padding;
      font-size: $font-size-small;
    }
  }
  &-mini &-return {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base, 0);
      padding-right: 0;
    }
  }

  &-mini &-enter {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base, 0);
      padding-left: 0;
    }
  }

  .#{$tabs-prefix-cls}-content-wrap {
    overflow: hidden;
    width: 100%;
  }
  .#{$tabs-prefix-cls}-content-animated {
    display: flex;
    flex-direction: row;
    transition: transform 0.3s $ease-in-out;
  }

  .#{$tabs-prefix-cls}-tabpane {
    flex-shrink: 0;
    width: 100%;
    transition: opacity 0.3s;
    opacity: 1;
    overflow: auto;  // #193547问题  h-tabs-tabpane新增overflow: auto;样式，解决当内部元素溢出，滚动下一个tab页面还有上一个页面的内容的问题
  }

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

  // card style
  &.#{$tabs-prefix-cls}-card > &-bar &-nav-container,&.#{$tabs-prefix-cls}-card-top > &-bar-top &-nav-container {
    @if $--size-switch == no {
      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;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4, 1px);
    } @else {
      height: $tabs-card-bar-top-tab-height;
      padding: $tabs-card-bar-top-tab-padding;
    }
    border: 1px solid $border-color-base;
    border-bottom: 0;
    border-radius: $btn-border-radius $btn-border-radius 0 0;
    transition: all 0.3s $ease-in-out;
    background: $table-thead-bg;

    @include theme-background-color($__tabs-card-bar-car-top-tab_background);
    @include theme-border-color($__tabs-card-bar-car-top-tab_border-color);
  }
  &.#{$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;

    @include theme-border-bottom-color($__tabs-card-top-tab_border-bottom-color);
  }
  &.#{$tabs-prefix-cls}-card > &-bar &-tab-active {
    @if $--size-switch == no {
      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;

    i {
      @include theme-font-color($__tabs-nav-tab-icon_active_font-color);
    }

    @include theme-background-color($__tabs-card-bar-tab-active_background);
    @include theme-font-color($__tabs-card-bar-tab-active_font-color);
    @include theme-border-color($__tabs-card-bar-tab-active_border-color);
  }
  &.#{$tabs-prefix-cls}-card-top > &-bar-top &-tab-active {
    @if $--size-switch == no {
      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;

    i {
      @include theme-font-color($__tabs-nav-tab-icon_active_font-color);
    }

    @include theme-background-color($__tabs-card-top-tab-active_background);
    @include theme-border-color($__tabs-card-top-tab-active_border-color);
    @include theme-font-color($__tabs-card-top-tab-active_font-color);
    @include theme-border-top-color($__tabs-card-top-tab-active_border-top-color);
  }
  &.#{$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;
      transition: transform 0.3s $ease-in-out;
    }
  }

  &-bar-right {
    float: left;
    // #202637 修复tabs当设置panelRight，左边的tabs控件选项没有撑满全部
    .#{$tabs-prefix-cls}-nav-right {
      display: block;
    }
  }

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

    @include theme-border-left-color($__tabs-content-right_border-left-color);

    .#{$tabs-prefix-cls}-tabpane {
      padding: 10px 20px;
    }
  }

  &-arrow-disabled {
    cursor: not-allowed !important;

    i {
      color: #aaa !important;
    }
  }
}

.#{$tabs-prefix-cls}-no-animation {
  /*  > .#{$tabs-prefix-cls}-content; heap-59534: 由于新增h-tabs-content-wrap属性，需要在此处去掉直接子元素>符号 */
  &>.#{$tabs-prefix-cls}-content-wrap>.#{$tabs-prefix-cls}-content {
    transform: none !important;

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