@import '../../common/style/gp-match/palette.scss';

.press__personal-box {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding-top: .1rem;
}

.press__personal-avatar-box {
  position: relative;
  width: .84rem;
  height: .84rem;
  margin: 0 auto;

  .press__personal-status-leader {
    position: absolute;
    top: -.04rem;
    left: -.08rem;
    width: .24rem;
    height: .24rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/icon-leader.png) no-repeat;
    background-size: 100%;
    z-index: 3;
  }

  .press__personal-status-leader--invite {
    bottom: 0;
    right: 0;
  }

  .press__personal-rank-img {
    position: absolute;
    top: -.1rem;
    left: -.07rem;
    width: .28rem;
    height: .28rem;

    img {
      width: .28rem;
      height: .28rem;
      display: block;
    }
  }

  .press__personal-label-ready {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: .02rem 0;
    color: #48c284;
    text-align: center;
    font-size: .18rem;
    white-space: nowrap;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/invild-btn.png) no-repeat;
    background-size: cover;
    z-index: 2;
  }

  .press__personal-label-enter {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: .02rem 0;
    color: #ffba00;
    text-align: center;
    font-size: .18rem;
    white-space: nowrap;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/invild-btn.png) no-repeat;
    background-size: cover;
    z-index: 2;
  }
}

.press__personal-avatar {
  position: relative;
  width: .84rem;
  height: .84rem;

  &::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 200%;
    height: 200%;
    // border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    // border-color: #33E2D1;
    border-color: #212124;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
  }

  img {
    width: 101%;
    height: 101%;
    max-width: 101%;
    // border-radius: 50%;

  }
}

.press__personal-avatar--invite {
  &::after {
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: #33e2d1;
  }

  img {
    border-radius: 50%;
  }
}

.press__personal-rank {
  display: flex;
  align-items: center;
  width: 1.2rem;
  margin: .12rem auto;
}

.press__personal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .84rem;
  height: .84rem;
  background: #eaeff2;
}

.press__personal-empty--invite {
  border-radius: 50%;
}

.press__personal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .84rem;
  height: .84rem;
  background: #eaeff2;
}

.press__icon-people {
  font-size: .46rem;
  color: rgba(0, 0, 0, .1);
}

.icon-close {
  font-size: .32rem;
  color: rgba(#212124, .1);
  transform: rotate(45deg);
}

.press__personal-rank-name {
  margin: 0 auto;
  width: .84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: $font-xs;
  color: rgba(255, 255, 255, .9);
}