@import '../../common/style/press/hairline-more/top-bottom.scss';
@import '../../common/style/press/ellipsis.scss';
@import '../../common/style/press/var.scss';

.press-tabs {
  position: relative;
  -webkit-tap-highlight-color: transparent;

  &__wrap {
    display: flex;
    overflow: hidden;

    &--scrollable {
      .press-tab {
        flex: 0 0 22%;

        &--complete {
          flex: 1 0 auto !important;
          padding: 0 $padding-sm;
        }
      }

      .press-tabs__nav {
        &--complete {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }

  &__scroll {
    // 微信小程序和 uni-app 的 h5 下的 scroll-view 都是 width: 100%;
    // 支付宝小程序并没有
    width: 100%;

    background-color: var(
      --tabs-nav-background-color,
      $tabs-nav-background-color
    );

    &--line {
      box-sizing: content-box;
      // 15px padding to hide scrollbar in mobile safari
      height: calc(100% + 15px);
    }

    &--card {
      box-sizing: border-box;
      margin: 0 var(--padding-md, $padding-md);
      border: $border-width-base solid
        var(--tabs-default-color, $tabs-default-color);
      width: calc(100% - calc(var(--padding-md, $padding-md) * 2));
      border-radius: $border-radius-sm;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__nav {
    position: relative;
    display: flex;
    user-select: none;

    // 【修改点】解决H5下tab贴顶的问题
    height: var(--tabs-line-height, 44px);

    &--card {
      box-sizing: border-box;
      height: var(--tabs-card-height, $tabs-card-height);

      .press-tab {
        color: var(--tabs-default-color, $tabs-default-color);
        line-height: calc(
          var(--tabs-card-height, $tabs-card-height) - 2 * $border-width-base
        );
        border-right: $border-width-base solid
          var(--tabs-default-color, $tabs-default-color);

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

        &.press-tab--active {
          color: $white;
          background-color: var(--tabs-default-color, $tabs-default-color);
        }

        &--disabled {
          color: var(--tab-disabled-text-color, $tab-disabled-text-color);
        }
      }
    }
  }

  &__line {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: var(--tabs-bottom-bar-height, $tabs-bottom-bar-height);
    border-radius: var(--tabs-bottom-bar-height, $tabs-bottom-bar-height);
    background-color: var(--tabs-bottom-bar-color, $tabs-bottom-bar-color);
  }

  &__track {
    position: relative;
    width: 100%;
    height: 100%;

    &--animated {
      display: flex;
      transition-property: left;
    }
  }

  &__content {
    overflow: hidden;
  }

  &--line {
    .press-tabs__wrap {
      height: var(--tabs-line-height, $tabs-line-height);
    }
  }

  &--card {
    .press-tabs__wrap {
      height: var(--tabs-card-height, $tabs-card-height);
    }
  }

  // 适配不支持virtualHost的小程序
  ::v-deep press-tab {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
  }
}

.press-tab {
  position: relative;
  flex: 1;
  box-sizing: border-box;
  min-width: 0; /* hack for flex ellipsis */
  padding: 0 5px;
  text-align: center;
  cursor: pointer;
  color: var(--tab-text-color, $tab-text-color);
  font-size: var(--tab-font-size, $tab-font-size);
  line-height: var(--tabs-line-height, $tabs-line-height);

  // 【修改点】让title水平垂直居中
  display: flex;
  align-items: center;
  justify-content: center;

  &--active {
    font-weight: var(--font-weight-bold, $font-weight-bold);
    color: var(--tab-active-text-color, $tab-active-text-color);
  }

  &--disabled {
    color: var(--tab-disabled-text-color, $tab-disabled-text-color);
  }

  ::v-deep .press__title__info,
  ::v-deep .press-info {
    position: relative !important;
    top: -1px !important;
    display: inline-block;
    transform: translateX(0) !important;
  }
}