@import '../utils.scss';
@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset';
@import '~@alifd/next/lib/tab/scss/variable';
@import '~@alifd/next/lib/tab/scss/mixin';

#{$tab-prefix} {
  /* shape: pure */
  /* ----------------- */
  &-pure > #{$tab-prefix}-bar {
    #{$tab-prefix}-nav-container {
      #{$tab-prefix}-tab:before {
        border-color: $b-design-tabpure-hover-bottom-border-color;
      }

      #{$tab-prefix}-tab:not(.active) {
        &:hover {
          &:before {
            width: 100%;
            left: 0;
            border-color: $b-design-tabpure-hover-bottom-border-color;
          }
        }
      }

      #{$tab-prefix}-tab.active {
        &:before {
          border-color: $color-brand1-6;
          border-width: 2px;
        }
      }

      #{$tab-prefix}-tab #{$tab-prefix}-tab-inner {
        padding-top: $s-1;
        height: $b-design-tabpure-text-height;
        line-height: $b-design-tabpure-text-line-height;
      }
    }
  }

  &-text > #{$tab-prefix}-bar {
    #{$tab-prefix}-nav-container {
      #{$tab-prefix}-tab #{$tab-prefix}-tab-inner {
        height: $b-design-tabpure-text-height;
        line-height: $b-design-tabpure-text-line-height;
        padding-top: $b-design-text-padding-tb;
        padding-bottom: $b-design-text-padding-tb;
      }
    }

    #{$tab-prefix}-tab:not(:last-child):after {
      height: $b-design-tabpure-text-line-height;
      top: calc(50% - #{$b-design-tabpure-text-line-height} / 2);
    }
  }

  /* Shape: wrapped(top) */
  &-wrapped > #{$tab-prefix}-bar {
    #{$tab-prefix}-tab.disabled:not(.active) {
      background-color: $color-fill1-1;
    }
  }

  &-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar {
    &:before {
      border-color: $color-brand1-6;
      z-index: 2;
    }

    #{$tab-prefix}-tab.active.disabled {
      border-color: $color-line1-1 $color-line1-1 white $color-line1-1;
    }

    #{$tab-prefix}-tab.active:not(.disabled) {
      border-color: $color-brand1-6 $color-brand1-6 white $color-brand1-6;
      z-index: 3;
    }
  }

  &-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar {
    #{$tab-prefix}-tab.active {
      border-color: white $color-brand1-6 $color-brand1-6 $color-brand1-6;
      z-index: 3;
    }
  }

  &-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-content {
    border-bottom: 1px solid $color-brand1-6;
    z-index: 2;
  }

  &-wrapped#{$tab-prefix}-left > #{$tab-prefix}-bar {
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      height: 100%;
      border-left: 1px solid $color-brand1-6;
      z-index: 2;
      right: 0;
    }

    #{$tab-prefix}-tab.active {
      border-color: $color-brand1-6 white $color-brand1-6 $color-brand1-6;
      z-index: 3;
    }
  }

  &-wrapped#{$tab-prefix}-left > #{$tab-prefix}-content {
    border-left: 1px solid $color-brand1-6;
    z-index: 2;
  }

  &-wrapped#{$tab-prefix}-right > #{$tab-prefix}-bar {
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      height: 100%;
      border-left: 1px solid $color-brand1-6;
      z-index: 2;
      left: 0;
    }

    #{$tab-prefix}-tab.active {
      border-color: $color-brand1-6 $color-brand1-6 $color-brand1-6 white;
      z-index: 3;
    }
  }

  //hover效果

  // &-wrapped>#{$tab-prefix}-bar {
  //   .#{$css-prefix}tabs-tab-close {
  //     position: relative;
  //     z-index: 1;
  //     right: -8px !important;
  //     margin-left: 0px !important;

  //     &:before {
  //       content: $b-design-wrapped-tab-item-inner-icon;
  //       color: $tab-wrapped-bg-color;
  //     }

  //     &:after {
  //       // @include close-btn-hover($b-design-close-btn-size, $color-fill1-1)
  //       @include close-btn-hover($b-design-close-btn-size, $tab-close-icon-color)
  //     }
  //   }

  //   #{$tab-prefix}-tab.active {
  //     #{$tab-prefix}-tab-close:before {
  //       color: white;
  //     }

  //     #{$tab-prefix}-tab-close:after {
  //       @include close-btn-hover($b-design-close-btn-size, $tab-close-icon-color-selected);
  //     }
  //   }

  //   #{$tab-prefix}-tab.active:hover {
  //     #{$tab-prefix}-tab-close:before {
  //       color: $tab-wrapped-bg-color-hover;
  //     }
  //   }
  // }
  &-wrapped > #{$tab-prefix}-bar {
    .#{$css-prefix}tabs-tab-close {
      position: relative;
      z-index: 1;
      right: -8px !important;
      margin-left: 0px !important;
    }

    #{$tab-prefix}-tab:not(.active):hover {
      .#{$css-prefix}tabs-tab-close:after {
        @include close-btn-hover(
          $b-design-close-medium-btn-size,
          $color-fill1-1
        );
      }
    }

    #{$tab-prefix}-tab.active:hover {
      .#{$css-prefix}tabs-tab-close:after {
        @include close-btn-hover(
          $b-design-close-medium-btn-size,
          $color-fill1-2
        );
      }
    }
  }

  &-wrapped.#{$css-prefix}large > #{$tab-prefix}-bar {
    #{$tab-prefix}-tab:not(.active):hover {
      .#{$css-prefix}tabs-tab-close:after {
        @include close-btn-hover(
          $b-design-close-large-btn-size,
          $color-fill1-1
        );
      }
    }

    #{$tab-prefix}-tab.active:hover {
      .#{$css-prefix}tabs-tab-close:after {
        @include close-btn-hover(
          $b-design-close-large-btn-size,
          $color-fill1-2
        );
      }
    }
  }

  &-btn-prev,
  &-btn-down {
    box-shadow: -8px 0px 8px -6px rgba(0, 0, 0, 0.2);
  }

  //medium
  &.#{$css-prefix}medium {
    #{$tab-prefix}-tab-inner {
      height: $b-design-tab-item-inner-medium-height;
    }
  }

  &.#{$css-prefix}large.#{$css-prefix}tabs-wrapped {
    @include tabs-size(
      $b-design-tab-item-padding-tb-size-large,
      $tab-item-padding-lr-size-m,
      $b-design-tab-item-text-size-large,
      $b-design-tab-item-text-size-large,
      $b-design-tab-nav-close-icon-size-l,
      $tab-nav-close-icon-padding-l-size-m,
      $tab-nav-scroll-padding-right-m
    );

    #{$tab-prefix}-tab-inner {
      height: $b-design-tab-item-inner-large-height;
      padding-top: $b-design-tab-item-inner-large-padding-top;
      padding-bottom: $b-design-tab-item-inner-large-padding-bottom;
      line-height: $b-design-tab-item-inner-large-line-height;

      #{$tab-prefix}-tab-close {
        float: right;
        margin-top: 2px;
        margin-left: 16px !important;
        right: 0px !important;
      }
    }
  }

  &.#{$css-prefix}large.#{$css-prefix}tabs-top,
  &.#{$css-prefix}large.#{$css-prefix}tabs-bottom {
    & .#{$css-prefix}tabs-nav {
      width: 100%;
      display: flex;
    }

    & > .#{$css-prefix}tabs-bar .#{$css-prefix}tabs-tab {
      flex: 1;

      .#{$css-prefix}tabs-tab-inner {
        text-align: center;
      }
    }
  }

  &-wrapped.#{$css-prefix}large > #{$tab-prefix}-bar {
    #{$tab-prefix}-tab,
    #{$tab-prefix}-tab.active {
      border-width: $b-design-tab-item-border-large;
    }
  }

  &-wrapped.#{$css-prefix}large.#{$css-prefix}tabs-top
    > .#{$css-prefix}tabs-bar {
    &:before {
      border-bottom-width: $b-design-tab-item-border-large;
      transform: translateY(-$b-design-tab-item-border-large);
    }

    .#{$css-prefix}tabs-tab {
      border-radius: $b-design-tab-inner-large-corner
        $b-design-tab-inner-large-corner 0 0;
    }
  }

  &-wrapped.#{$css-prefix}large.#{$css-prefix}tabs-bottom {
    > .#{$css-prefix}tabs-content {
      border-bottom-width: $b-design-tab-item-border-large;
    }

    > .#{$css-prefix}tabs-bar {
      top: -1px;

      .#{$css-prefix}tabs-tab {
        border-radius: 0 0 $b-design-tab-inner-large-corner
          $b-design-tab-inner-large-corner;
      }
    }
  }

  &-wrapped.#{$css-prefix}large.#{$css-prefix}tabs-left {
    > .#{$css-prefix}tabs-bar:before {
      border-left-width: 2px;
    }

    > .#{$css-prefix}tabs-bar {
      .#{$css-prefix}tabs-tab {
        border-radius: $b-design-tab-inner-large-corner 0 0
          $b-design-tab-inner-large-corner;
      }
    }
  }

  &-wrapped.#{$css-prefix}large.#{$css-prefix}tabs-right {
    > .#{$css-prefix}tabs-bar:before {
      border-left-width: 2px;
    }

    > .#{$css-prefix}tabs-bar {
      .#{$css-prefix}tabs-tab {
        border-radius: 0 $b-design-tab-inner-large-corner
          $b-design-tab-inner-large-corner 0;
      }
    }
  }

  //全局通栏
  &-pure.#{$css-prefix}large {
    .#{$css-prefix}tabs-nav {
      width: 100%;
    }

    & > #{$tab-prefix}-bar {
      #{$tab-prefix}-nav-container {
        #{$tab-prefix}-tab:before {
          border-bottom-width: 2px;
        }

        #{$tab-prefix}-tab #{$tab-prefix}-tab-inner {
          padding-top: $s-3;
          height: $b-design-tabpure-text-large-height;
          line-height: $b-design-tabpure-text-large-line-height;

          .#{$css-prefix}tabs-tab-close:before {
            width: 20px;
            font-size: 20px;
          }
        }
      }
    }
  }

  &-text.#{$css-prefix}large {
    .#{$css-prefix}tabs-nav {
      width: 100%;
    }

    & > #{$tab-prefix}-bar {
      #{$tab-prefix}-nav-container {
        #{$tab-prefix}-tab #{$tab-prefix}-tab-inner {
          padding-top: $s-3;
          padding-bottom: $s-3;
          height: $b-design-tabpure-text-large-height;
          line-height: $b-design-tabpure-text-large-line-height;

          .#{$css-prefix}tabs-tab-close:before {
            width: 20px;
            font-size: 20px;
          }
        }
      }
    }
  }

  //wrapped grey them
  &-wrapped.#{$css-prefix}grey
    > #{$tab-prefix}-bar
    #{$tab-prefix}-tab:not(.active):hover {
    background-color: $b-design-tab-wrapped-grey-bg-color;
    border-color: $b-design-tab-wrapped-grey-bg-color;
  }

  &-wrapped.#{$css-prefix}grey#{$tab-prefix}-top
    > #{$tab-prefix}-bar
    #{$tab-prefix}-tab.active {
    border-bottom-color: $b-design-wrapped--hover-bottom-border-color;
  }
}