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

.#{$hashClassName}.cn-ui-m-tab-wrapper {
  position: relative;
  .cn-ui-m-tab {
    z-index: $cn-tab-z-index;
    width: 100%;
    background-color: $m-color-bg-white;

    &-type-primary {
      position: sticky;
      top: 0;
    }

    &-type-secondary {
      border-top-left-radius: $m-radius-larger;
      border-top-right-radius: $m-radius-larger;
    }

    // 顶部
    &-header {
      @include flex(row, space-between);
    }

    // tab 可滚动容器
    &-container {
      @include flex(row);
      position: relative;
      z-index: $cn-tab-container-z-index;
      flex: 1;
      width: 100%;
      height: $m-s-40;
      overflow: auto;

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

    &-scroll-container {
      // 默认情况下，均匀分布，超出后向右滚动
      @include flex(row, space-around);
      width: auto;
      min-width: 100%;
      height: $m-s-40;

      $scroll-container-cur: &;

      &-overflow {
        justify-content: flex-start;
      }

      &-align-left {
        justify-content: flex-start;
      }
    }

    &-more {
      position: absolute;
      top: 0;
      z-index: $cn-tab-more-z-index;
      width: $m-s-45;
      height: $m-s-40;
      visibility: hidden;
      pointer-events: none;

      &-left {
        left: 0;
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          #fff 63%
        );
        transform: scaleX(-1);
      }

      &-right {
        right: 0;
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          #fff 63%
        );
      }
    }

    &-divider {
      position: absolute;
      top: $m-s-40;
      right: 0;
      left: 0;
      border-bottom: 1px solid #f2f4f8;
    }
  }

  .cn-ui-m-tab-content {
    width: 100%;

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

    &-type-secondary {
      padding: $m-s-12;
      background: $m-color-bg-white;
      border-bottom-right-radius: $m-radius-larger;
      border-bottom-left-radius: $m-radius-larger;
    }

    .cn-ui-m-card-no-padding {
      .cn-ui-m-tab {
        border-top-right-radius: $m-radius-larger;
        border-top-left-radius: $m-radius-larger;

        &-more {
          &-left {
            border-top-left-radius: $m-radius-larger;
          }

          &-right {
            border-top-right-radius: $m-radius-larger;
          }
        }
      }
    }
  }
}