/*
 * desc: 创建战队弹窗组件样式
 * date: 2025-08-15
 * author: lauheeliu
 * email: lauheeliu@tencent.com
 */

@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix}-create-team {
  background-color: $ctp-bg-color;
  padding-bottom: $ctp-content-p-tb;

  &__head-title {
    @include flex(row, center, center);
    height: $ctp-title-height;
    text-align: center;
    font-size: $ctp-title-font-size;
    color: $ctp-text-color-primary;
    font-weight: 500;
    margin-bottom: .32rem;
  }

  &__body {
    padding: 0 $ctp-content-p-lr;
  }

  &__avatar {
    @include flex(row, center, center);
    margin-bottom: .32rem;

    &-wrap {
      position: relative;
      width: $ctp-avatar-size;
      height: $ctp-avatar-size;
    }

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

    &-placeholder {
      width: 100%;
      height: 100%;
      border-radius: $ctp-avatar-radius;
      background-color: $ctp-placeholder-bg;
      border: 1px solid $ctp-border-color;
    }

    &-upload {
      position: absolute;
      right: 0;
      bottom: 0;
      width: .4rem;
      height: .4rem;
      background-color: $ctp-text-color-primary;
      border-radius: 50%;
      @include flex(row, center, center);
      cursor: pointer;
    }

    &-icon {
      width: .24rem;
      height: .24rem;
      background-color: white;

      &::before,
      &::after {
        content: '';
        position: absolute;
        background-color: $ctp-text-color-primary;
      }

      &::before {
        width: .12rem;
        height: .02rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &::after {
        width: .02rem;
        height: .12rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &__name {
    &-input {
      height: $ctp-name-input-height;
      background-color: $ctp-placeholder-bg;
      border: 1px solid $ctp-border-color;
      border-radius: $ctp-input-radius;
      padding: 0 .24rem;
      font-size: $ctp-input-font-size;
    }
  }

  &__options {
    background-color: $ctp-bg-color;
    border-radius: .12rem;
    overflow: hidden;
  }

  &__option {
    @include flex(row, space-between, center);
    height: $ctp-option-height;
    background-color: $ctp-bg-color;
    border-bottom: 1px solid $ctp-divider-color;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }

    &--upload {
      height: $ctp-option-upload-height;
    }

    &-label {
      font-size: $ctp-label-font-size;
      color: $ctp-text-color-primary;
      line-height: $ctp-line-height;
    }

    &-value {
      @include flex(row, center, center);
    }

    &-text {
      font-size: $ctp-input-font-size;
      color: $ctp-text-color-placeholder;
      margin-right: .16rem;
      line-height: $ctp-line-height;
    }

    &-arrow {
      position: relative;
      width: .4rem;
      height: .4rem;

      &::after {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        content: '';
        width: .12rem;
        height: .12rem;
        border-right: 2px solid $ctp-text-color-placeholder;
        border-bottom: 2px solid $ctp-text-color-placeholder;
        transform: rotate(-45deg);
      }
    }

    &-switch {
      // Switch组件样式由press-ui控制
    }
  }

  &__upload {
    width: $ctp-upload-size;
    height: $ctp-upload-size;
    background-color: $ctp-upload-bg;
    border-radius: $ctp-upload-radius;
    @include flex(row, center, center);
    cursor: pointer;

    &-icon {
      width: .6rem;
      height: .6rem;
      border-radius: 50%;
      background-color: $ctp-upload-bg;
      @include flex(row, center, center);
      position: relative;
    }

    &-plus {
      position: relative;
      width: .24rem;
      height: .24rem;

      &::before,
      &::after {
        content: '';
        position: absolute;
        background-color: $ctp-upload-icon-color;
      }

      &::before {
        width: .24rem;
        height: .04rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &::after {
        width: .04rem;
        height: .24rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &__foot {
    padding: 0 .04rem;
    margin: .32rem $ctp-content-p-lr 0;

    &-btn {
      height: $ctp-btn-height;
      border-radius: $ctp-btn-radius;
      font-size: $ctp-btn-font-size;
      font-weight: 400;
      letter-spacing: .01rem;
    }
  }
}