/*
 * desc: 赛事未满人组件样式
 * date: 2025-08-07
 * author: alltasxiao
 * email: alltasxiao@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix}-schedule-not-full {
  position: relative;
  width: $snf-card-width;

  &__header {
    position: relative;
    overflow: hidden;
    height: 2.26rem;

    &-wrap {
      @include flex(row, space-between, center);
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: $snf-header-height;
      padding: 0 .24rem;
      margin: 0 .16rem;
      background: linear-gradient(180deg, #0e1722 0%, #5c3931 46.57%);
      border-top-right-radius: $snf-card-border-radius;
      border-top-left-radius: $snf-card-border-radius;
    }

    &-info {
      @include flex(column, flex-start, flex-start);
    }

    &-teamname {
      color: $snf-teamname-color;
      font-size: $snf-teamname-font-size;
      font-weight: 500;
    }

    &-countdown {
      margin-top: .32rem;
      color: $snf-countdown-color;
      font-size: $snf-countdown-font-size;
    }

    &-brand {
      position: absolute;
      right: .12rem;
      bottom: -.6rem;
      z-index: 100;
      width: 3.44rem;
      height: 2.86rem;
    }
  }

  &__content {
    padding: $snf-card-padding;
    text-align: center;
    background: linear-gradient(180deg, #effaff 0%, #fff 100%);
    box-shadow: inset 0 1px 1px #ecf3fa;
    border-top-right-radius: $snf-card-border-radius;
    border-top-left-radius: $snf-card-border-radius;
    backdrop-filter: blur(13.5914px);

    &-desc {
      margin-bottom: .16rem;
      color: $snf-desc-color;
      font-size: $snf-desc-font-size;
    }

    &-tips {
      margin-bottom: .24rem;
      color: $snf-tips-color;
      font-size: $snf-tips-font-size;
    }

    &-members {
      @include flex(row, center, center);
      margin-bottom: .28rem;
    }

    &-member {
      @include flex(row, center, center);
      position: relative;
      overflow: hidden;
      width: $snf-avatar-size;
      height: $snf-avatar-size;
      margin-right: .16rem;
      border: $snf-avatar-border-width solid $snf-avatar-border-color;
      border-radius: $snf-avatar-radius;

      &-avatar {
        width: .72rem;
        height: .72rem;
        border-radius: $snf-avatar-radius;
      }
    }

    &-placeholder {
      @include flex(row, center, center);
      width: $snf-avatar-size;
      height: $snf-avatar-size;
      margin-right: .16rem;
      color: $snf-placeholder-color;
      font-size: .32rem;
      background: $snf-placeholder-bg;
      border: $snf-avatar-border-width dashed $snf-avatar-border-color;
      border-radius: $snf-placeholder-radius;
    }

    &-invite-button {
      @include flex(row, center, center);
      width: $snf-button-width;
      height: $snf-button-height;
      font-size: $snf-button-font-size;
      border-radius: $snf-button-radius;
    }
  }
}