.yg-tabs {
  background-color: $yg-white;

  &.tg-tabs-sticky {
    position: sticky;
    width: 100%;
    z-index: 20;
    top: 0;
  }

  &-list {
    display: flex;
    align-items: stretch;
    padding: 0 20rpx;
    height: 88rpx;
  }

  &-scroll {
    position: relative;
    &.mask::after {
      content: '';
      position: absolute;
      right: -14rpx;
      height: 100%;
      top: 0;
      width: 88rpx;
      background: linear-gradient(270deg, #ffffff 0%, #ffffff 51%, rgba(255, 255, 255, 0) 100%);
      opacity: 0.95;
    }
  }

  &-equal {
    justify-content: space-around;
  }

  &-item {
    color: #969799;
    font-size: 28rpx;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    white-space: nowrap;

    .yg-tabs-line {
      width: 0;
      max-width: 80rpx;
      height: 6rpx;
      position: absolute;
      left: 50%;
      bottom: 3rpx;
      background: var(--yg-main-color);
      border-radius: 4rpx;
      transform: translate(-50%, 0);
      transition: width 0.12s ease-in-out;
    }
    &.active {
      color: var(--yg-main-color);
      font-weight: bold;
      .yg-tabs-line {
        width: 50%;
      }
    }
  }
}