@import '../variables/default.scss';
@import '../mixins/index.scss';

$component: '.at-tabs';
$at-tabs-pane-min-height: 100px;
$at-tabs-bar-height: 84px;
$at-tabs-bar-button-height: 74px;
@mixin at-tabs-header-border($pos) {
  /* prettier-ignore */
  border-#{$pos}: 1PX solid $color-grey-4;
}

#{$component} {
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* elements */
  &__item {
    position: relative;
    flex: 1;
    padding: 0 $spacing-h-lg;
    color: $at-tabs-color;
    font-size: $at-tabs-font-size;
    text-overflow: ellipsis;
    overflow: hidden;

    &-underline {
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: $at-tabs-line-height;
      background-color: $at-tabs-color-active;
      transform: scaleX(0);
      transition: all 0.15s;
      border-radius: 0.5 * $at-tabs-line-height;
    }

    &--active {
      color: $at-tabs-color-active;
      font-weight: 500;

      #{$component}__item-underline {
        transform: scaleX(1);
      }
    }

    &--disabled {
      opacity: $opacity-disabled;
    }

    .at-badge {
      line-height: $at-tabs-bar-height;
      height: $at-tabs-bar-height;

      .at-badge-text {
        top: 6px;
        font-weight: normal;
      }

      .at-badge-dot {
        top: 0.5 * $font-size-lg;
        height: 0.5 * $font-size-xxl;
        width: 0.5 * $font-size-xxl;
      }
    }
  }

  &__header {
    position: relative;
    display: flex;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    background-color: $at-tabs-bg-color;
    box-sizing: border-box;
    overflow: -moz-scrollbars-none;

    &-border {
      &#{$component}__header--position-top {
        @include at-tabs-header-border('bottom');
      }

      &#{$component}__header--position-right {
        @include at-tabs-header-border('left');
      }

      &#{$component}__header--position-bottom {
        @include at-tabs-header-border('top');
      }

      &#{$component}__header--position-left {
        @include at-tabs-header-border('right');
      }
    }

    &::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      background: transparent;
    }
  }

  &__body {
    display: block;
    width: 100%;
    white-space: nowrap;
    transition: all 0.3s;
    will-change: transform, left, top;
    overflow: visible;
    position: relative;
    //在ios支付宝端，当内部使用元素fixed时，会出现被遮挡的情况，这是hack
    padding-top: 2px;
  }

  &__underline {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    width: 600%;
    height: $at-tabs-line-height;
    background-color: $at-tabs-underline-color;
  }

  /* modifiers */
  &--scroll {
    #{$component}__header {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
    }

    #{$component}__item {
      display: inline-block;
      overflow: visible;
      // flex: initial;
    }
  }

  &--position-right {
    #{$component}__header {
      #{$component}__item {
        &-underline {
          left: 0;
          right: auto;
        }
      }
    }
  }

  &--horizontal {
    #{$component}-pane {
      max-height: calc(100vh - #{$at-tabs-bar-height});
      overflow-y: auto;
    }
  }

  &--vertical {
    display: flex;
    flex: 1;
    overflow: hidden;

    #{$component}__body {
      display: inline-block;
      flex: 1;
      height: $at-tabs-pane-min-height;
      width: auto;
    }

    #{$component}__underline {
      top: 0;
      left: 0;
      bottom: auto;
      width: $at-tabs-line-height;
      height: 100%;
    }

    #{$component}__header {
      display: inline-block;
      width: auto;
    }

    #{$component}__item {
      display: flex;
      justify-content: center;
      width: auto;
      align-items: center;
      padding: 0;

      .at-badge {
        padding: 0 $spacing-h-lg;
      }

      &-underline {
        display: block;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: $at-tabs-line-height;
        height: 100%;
        transform: scaleY(0);
      }

      &--active {
        #{$component}__item-underline {
          transform: scaleY(1);
        }
      }
    }
  }

  &-no-animation {
    #{$component}__body {
      will-change: unset;
    }

    .at-tabs-pane {
      &--inactive {
        display: none;
      }
    }
  }

  &--type-button {
    #{$component}__header {
      padding: $spacing-h-lg 0;

      #{$component}__item {
        background: $color-grey-7;
        border-radius: 100px;
        margin-right: $spacing-h-lg;
        font-size: $at-tabs-button-font-size;

        &:last-child {
          margin-right: 0;
        }

        .at-badge {
          height: $at-tabs-bar-button-height;
          line-height: $at-tabs-bar-button-height;
        }

        &-underline {
          display: none;
        }

        &--active {
          color: $color-white;
          background: $color-brand;
        }
      }
    }
  }
}

/* hack SWAN */

#{$component}--scroll#{$component}--horizontal#{$component}--swan {
  #{$component}__item-underline {
    bottom: $at-tabs-line-height;
  }
}

/* hack SWAN */

.at-tabs-pane {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  white-space: initial;
  vertical-align: top;

  /* modifiers */
  // &--active {
  //   height: auto;
  // }

  // &--inactive {
  //   height: 0;
  //   overflow: hidden;
  // }

  &--vertical {
    display: block;
    height: 100%;
    overflow: scroll;
  }
}