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

.press-score {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 1.3rem;
  height: auto;
  align-items: flex-start;
}

.press-score__avatar-box {
  position: relative;
  width: .84rem;
  height: .84rem;
  margin: 0 auto;

  .press-score__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;
  }

  .press-score__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-score__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-score__avatar {
  position: relative;
  width: .84rem;
  height: .84rem;

  &::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 200%;
    height: 200%;
    border-style: solid;
    border-width: 1px;
    border-color: $color-black-2;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
  }

  .press-score__avatar-image {
    width: 101%;
    height: 101%;
    max-width: 101%;
  }
}

.press-score__out-rank {
  display: flex;
  align-items: center;
  max-width: 1.3rem;
  margin: .12rem auto;
}

.press-score__out-rank-img {
  width: .28rem;
  height: .28rem;

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

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

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

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

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

.press-score__out-rank-name {
  margin: 0 auto;
  text-align: center;
  font-size: .2rem;
  color: rgba(33, 33, 36, .75);
  // 不能用多行省略，否则海报生成不出来
  // -webkit-line-clamp: 2;
  // -webkit-box-orient: vertical;
  // display: -webkit-box;
  max-width: 1.02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 个人信息卡片 */
.press-score__card {
  position: absolute;
  transform: translateX(.2rem);
  z-index: 9;
  top: -.3rem;
  left: 50%;
  width: 2.46rem;
  height: 1.6rem;
  padding: .16rem;
  background: rgba(0, 0, 0, .75);
  overflow: hidden;
}

.press-score__nick {
  color: rgba(255, 255, 255, .75);
  font-size: .22rem;
  line-height: .32rem;

  @extend %t-ellipsis;
}

.press-score__meta {
  @include flex-content($justify: flex-start);

  .press-score__meta-item {
    @include flex-content($justify: flex-start);
  }

  .press-score__rank-img {
    max-height: .24rem;
    width: .24rem;
    height: .24rem;
    margin-right: .04rem;
  }

  .press-score__rank-name {
    width: .9rem;
    margin: 0;
    white-space: nowrap;
    text-align: left;
    font-size: .16rem;
    color: rgba(255, 255, 255, .75);
  }
}

.press-score__meta-more {
  margin-top: .08rem;
  padding-top: .06rem;
  border-top: 1px solid rgba(255, 255, 255, .35);

  .p {
    margin-top: .04rem;

    @include flex-content;

    .span {
      color: rgba(255, 255, 255, .75);
      font-size: .18rem;
      line-height: .26rem;
    }

    .em {
      color: rgba(255, 255, 255, .75);
      font-size: .24rem;
      line-height: .26rem;
      font-family: 'DINCondensed';
    }
  }
}