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


.personal-box {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 1.58rem;
  align-items: flex-start;
}

.personal-avatar-box {
  position: relative;
  width: .82rem;
  height: .82rem;
  margin: 0 auto;

  .status-leader {
    position: absolute;
    bottom: -.04rem;
    right: -.12rem;
    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;
  }

  .label-personal-ready {
    position: absolute;
    bottom: 0;
    right: 0;
    width: .82rem;
    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: 100% 100%;
    background-color: rgba(74, 74, 79, .7);
    z-index: 2;
    line-height: .32rem;
  }

  .label-personal-enter {
    position: absolute;
    bottom: 0;
    right: 0;
    width: .82rem;
    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-color: rgba(74, 74, 79, .7);
    line-height: .32rem;
    background-size: 100% 100%;
    z-index: 2;
  }
}

.personal-avatar {
  position: relative;
  width: .82rem;
  height: .82rem;
  border-style: solid;
  border-width: .02rem;
  border-color: $color-black-2;

  img {
    width: 100%;
    height: 100%;
  }
}

.personal-rank {
  display: flex;
  align-items: center;
  width: 1.1rem;
  margin: .1rem auto;
}

.personal-rank-img {
  width: .28rem;
  height: .28rem;

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

.personal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .84rem;
  height: .84rem;
  background: rgba(105, 105, 105, .2);
}

.personal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .84rem;
  height: .84rem;
  background: rgba(220, 223, 228, .7);
}

.personal-box-bottom {
  width: .96rem;
  height: .28rem;
  line-height: .28rem;
  text-align: center;
  background: linear-gradient(269.02deg, #9ab3f3 0%, #aef4f5 100%);
  border-radius: .2rem;
  color: #3a434a;
  font-size: .16rem;
  position: absolute;
  bottom: -.04rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .02rem;


  .personal-box-bottom-tips {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    letter-spacing: 0;
  }
}

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

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

.personal-rank-name {
  margin: 0 auto;
  text-align: center;
  font-size: $font-xs;
  color: rgba(33, 33, 36, .75);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 1.02rem;
  line-height: .22rem;
}