/*
 * desc: 比赛开始前倒计时组件样式
 * date: 2025-08-13
 * author: alltasxiao
 * email: alltasxiao@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import '_var.scss';

.#{$prefix}-not-kickoff {
  position: relative;
  background-color: $snk-bg-color;
  box-shadow: $snk-card-shadow;

  &__progress {
    width: 100%;
    height: $snk-progress-height;
    background-color: $snk-primary-color;
    position: absolute;
    top: 0;
    left: 0;
  }

  &__content {
    padding: $snk-content-padding;
    padding-top: calc($snk-content-padding + $snk-progress-height);
  }

  &__title {
    font-size: $snk-title-font-size;
    color: $snk-title-color;
    font-weight: 500;
    text-align: center;
    margin-bottom: $snk-content-padding;
  }

  &__card {
    background-color: $snk-card-bg;
    border-radius: $snk-card-radius;
    padding: $snk-card-padding;
    margin-bottom: $snk-content-padding;
  }

  &__participants {
    @include flex(row, flex-start, center);
    height: $snk-card-height;
  }

  &__main-avatar {
    width: $snk-main-avatar-size;
    height: $snk-main-avatar-size;
    border: $snk-main-avatar-border solid $snk-main-avatar-border-color;
    border-radius: $snk-avatar-radius;
    flex-shrink: 0;
    margin-right: $snk-avatar-spacing;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: -.16rem;
      top: 50%;
      transform: translateY(-50%);
      width: .02rem;
      height: 100%;
      background-color: #eff2f6;
    }

    img {
      width: 100%;
      height: 100%;
      padding: $snk-main-avatar-img-padding;
      object-fit: cover;
      border-radius: $snk-avatar-radius;
    }
  }

  &__avatar-list {
    @include flex(row, flex-start, center);
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  &__avatar-item {
    width: $snk-avatar-size;
    height: $snk-avatar-size;
    background-color: $snk-avatar-item-bg;
    border-radius: $snk-avatar-radius;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: -.16rem;
    border: .04rem solid #eff2f6;
    position: relative;

    &:first-child {
      margin-left: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__more-count {
    @include flex(row, center, center);
    width: $snk-more-size;
    height: $snk-more-size;
    background-color: $snk-more-bg;
    border-radius: $snk-more-radius;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: -.16rem;
    border: .04rem solid #eff2f6;
    position: relative;

    &__text {
      font-size: $snk-more-font-size;
      color: $snk-more-color;
      font-weight: 400;
    }
  }

  &__countdown-button {
    @include flex(row, center, center);
    background-color: $snk-countdown-bg;
    color: $snk-primary-color;
    font-size: $snk-countdown-font-size;
    letter-spacing: .01rem;
    font-weight: 400;
  }
}