@import "~@/assets/styles/utils/index.scss";

@include c(tabs) {
  $tabs-height: 76px;
  $tabs-border-color: map-get($colors, gray4);
  $tabs-active-color: map-get($colors, primary);

  position: relative;
  display: flex;
  border-bottom: 1px solid $tabs-border-color;
  z-index: map-get($z-indexes, c-tabs);

  @include e(item) {
    @include text--middle(px2rpx($tabs-height));

    position: relative;
    flex: 1;

    &.is-active {
      color: $tabs-active-color;

      &::after {
        @include position--absolute(null, null, px2rpx(8px), 50%);

        transform: translateX(-50%);
        display: block;
        content: "";
        width: px2rpx(36px);
        border-bottom: px2rpx(8px) solid $tabs-active-color;
        border-radius: px2rpx(8px);
      }
    }
  }

  @include e(content) {
    @include size(100%, calc(100% - 76rpx));

    swiper-item,
    scroll-view {
      height: 100%;
    }
  }
}