/*
 * desc: 入队申请列表组件样式
 * date: 2025-08-13
 * author: lauheeliu
 * email: lauheeliu@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix}-apply-team-list {
  @include flex(column);
  height: 100%;
  overflow-y: auto;
  background-color: $atl-bg-color;

  &__tip {
    padding: $atl-content-p-tb $atl-content-p-lr;
    font-size: $atl-tip-font-size;
    color: $atl-text-color-tip;
    line-height: $atl-line-height;
  }

  &__item {
    background-color: $atl-item-bg-color;
    border-bottom: 1px solid $atl-border-color;
    padding: $atl-item-p-tb $atl-item-p-lr;
  }

  &__user {
    @include flex(row, flex-start, center);
    min-height: .8rem;
  }

  &__avatar {
    width: $atl-avatar-size;
    height: $atl-avatar-size;
    margin-right: .24rem;
    flex-shrink: 0;

    &-img {
      width: 100%;
      height: 100%;
      border-radius: $atl-avatar-radius;
      object-fit: cover;
    }
  }

  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &__name {
    font-size: $atl-name-font-size;
    color: $atl-text-color-primary;
    font-weight: 500;
    line-height: $atl-line-height;
    margin-bottom: .08rem;
  }

  &__rank {
    display: inline-block;
    padding: .02rem .08rem;
    background-color: $atl-rank-bg-color;
    color: $atl-rank-text-color;
    font-size: $atl-rank-font-size;
    border-radius: $atl-rank-radius;
    line-height: $atl-line-height;
    width: fit-content;
  }

  &__actions {
    @include flex(row, flex-end, center);
    flex-shrink: 0;
  }

  &__btn {
    margin-left: $atl-btn-margin;

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

  &__status {
    font-size: $atl-status-font-size;
    color: $atl-text-color-status;
    line-height: $atl-line-height;
  }

  &__remark {
    margin-top: .24rem;
    margin-left: calc($atl-avatar-size + .24rem);
    font-size: $atl-remark-font-size;
    color: $atl-text-color-remark;
    line-height: $atl-line-height;
    word-break: break-all;
  }

  &__empty {
    @include flex(column, center, center);
    flex: 1;

    &-text {
      font-size: $atl-empty-font-size;
      color: $atl-text-color-secondary;
      line-height: $atl-line-height;
    }
  }
}