/*
 * desc: 队伍卡片组件样式
 * date: 2025-08-12
 * author: janfzhao
 * email: janfzhao@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix}-team-item {
  width: $mti-card-width;
  height: $mti-card-height;
  background-color: $mti-bg-color;
  border-radius: $mti-card-radius;
  box-shadow: $mti-card-shadow;
  overflow: hidden;
  border: .02rem solid $mti-border-color;

  &__header {
    @include flex(row, space-between, center);
    padding: $mti-header-padding-tb $mti-header-padding-lr;
    position: relative;

    &--home {
      background-color: $mti-header-bg-color-home;
    }

    &--away {
      background-color: $mti-header-bg-color-away;
    }

    &--action {
      background-color: $mti-header-bg-color-action;
    }

    &-left {
      @include flex(row, flex-start, center);
      width: 3.08rem;
      height: .6rem;
      position: relative;
      z-index: 2;
    }

    &-title {
      font-size: $mti-team-name-font-size;
      font-weight: 400;
      margin-right: .04rem;
      line-height: .3rem;

      &--home,
      &--away {
        color: $mti-text-color-white;
      }

      &--action {
        color: $mti-text-color-primary;
      }
    }

    &-right {
      @include flex(row, center, center);
      position: relative;
      z-index: 2;
    }

    &-checkbox {
      margin: .04rem;
    }
  }

  &__content {
    padding: $mti-content-padding;
  }

  &__list {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;
    gap: $mti-member-spacing;
    padding: 0 .24rem;
  }

  &__member {
    @include flex(column, center, center);
    width: $mti-avatar-size;
    cursor: pointer;

    &-wrapper {
      position: relative;
      width: $mti-avatar-size;
      height: $mti-avatar-size;
      margin-bottom: $mti-name-margin-top;
    }

    &-avatar {
      width: 100%;
      height: 100%;
      border-radius: $mti-avatar-radius;
      border: $mti-avatar-border-width solid $mti-avatar-border-color;
      overflow: hidden;
      position: relative;

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

    &-badge {
      position: absolute;
      top: -.04rem;
      left: -.04rem;
      width: $mti-captain-badge-size;
      height: $mti-captain-badge-size;
      background-color: $mti-captain-badge-color;
      border-radius: $mti-captain-badge-radius;
      @include flex(row, center, center);
      z-index: 1;
    }

    &-name {
      font-size: $mti-member-name-font-size;
      color: $mti-text-color-primary;
      text-align: center;
      max-width: $mti-avatar-size;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-add {
      @include flex(column, center, center);
      width: $mti-add-btn-size;
      cursor: pointer;

      &-icon {
        position: relative;
        width: $mti-add-btn-size;
        height: $mti-add-btn-size;
        margin-bottom: $mti-name-margin-top;
        border-radius: $mti-avatar-radius;
        background-color: $mti-add-btn-bg-color;
        border: $mti-avatar-border-width solid $mti-avatar-border-color;
        @include flex(row, center, center);
        position: relative;

        &::before,
        &::after {
          content: '';
          position: absolute;
          background-color: $mti-avatar-border-color;
        }

        &::before {
          width: .46rem;
          height: .04rem;
        }

        &::after {
          width: .04rem;
          height: .46rem;
        }
      }

      &-text {
        font-size: $mti-add-text-font-size;
        color: $mti-text-color-secondary;
        text-align: center;
        max-width: $mti-add-btn-size;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    
  }
  
}