@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-tab-item {
  @include flex(row, center, center);
  position: relative;
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;

  &-type-primary {
    padding: 0 $m-s-16;
    .cn-ui-m-badge {
      font-size: $m-font-size-headline-6;
    }
  }

  &-type-secondary {
    padding: 0 $m-s-12;
  }

  .cn-ui-m-tab-item {
    // 标题文字
    &-text {
      text-align: center;
      color: $m-color-text;
      font-size: $m-font-size-headline-6;
      line-height: $m-font-lineheight-1;

      &--active {
        color: $m-color-primary;
        font-weight: $m-font-weight-bold;
      }

      &--secondary {
        font-size: $m-s-14;
      }
    }
    &-active-line {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      transition: all 0.25s;

      display: flex;
      justify-content: center;

      &-block {
        height: $m-s-2;
        width: $m-s-28;
        border-radius: $m-radius-small;
        background-color: $m-color-primary;
      }

      &--enter {
        transform: scaleX(1);
      }

      &--exit {
        transform: scaleX(0);
      }
    }
  }

  &--active {
    .cn-ui-m-badge {
      color: $m-color-primary;
    }
  }
}