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


.press-item {
  position: relative;
  width: 3.32rem;
  height: 5.28rem;
  padding-top: .32rem;
  padding-bottom: .56rem;
  background: #fff url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/my-match-info-bottom.png) no-repeat;
  background-size: 100% 100%;


  &__top {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.32rem;
    height: 2.66rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/my-match-info-top.png) no-repeat;
    background-size: 100%;
  }

  &__label {
    position: absolute;
    top: 0;
    left: 0;
    width: .84rem;
    height: .22rem;
    line-height: .22rem;
    padding-left: .08rem;
    font-family: 'PEACE';
    font-size: .16rem;
    clip-path: polygon(0 0, 100% 0%, 73% 100%, 0% 100%);

    &.play {
      color: #fcfcfc;
      background: linear-gradient(270deg, #5300c3 -22.39%, #5e2eff 232.68%);
    }

    &.signup {
      color: #2e3438;
      background: #fc0;
    }

    &.end {
      color: #2e3438;
      background: linear-gradient(270deg, #888 22.22%, #a0a0a0 73.15%, #a0a0a0 73.15%);
    }

    &.signedup {
      color: #fff;
      background: linear-gradient(270deg, #ff8c00 22.22%, #fc0 73.15%);
    }
  }

  &__match-num {
    position: relative;
    text-align: center;
    font-size: .18rem;
    color: rgba(255, 255, 255, .75);
  }

  &__match-num {
    margin: 0 .16rem;
  }

  &__name {
    display: block;
    position: relative;
    margin-top: .14rem;
    font-weight: bold;
    text-align: center;
    font-size: .28rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 3.32rem;
    height: .44rem;
    word-break: break-all;
    padding: 0 .1rem;
    box-sizing: border-box;
  }

  &__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.46rem auto 0;
    width: 1.4rem;
    height: 1.4rem;
    position: relative;
    z-index: 2;
  }

  &__img {
    position: relative;
    display: block;
    height: 1.4rem;
    object-fit: contain;
  }


  &__area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .64rem;
  }

  &__area-item {
    position: relative;
    margin: 0 .16rem;
    font-size: .2rem;
    color: rgba(255, 255, 255, .75);

    &::after {
      content: '';
      position: absolute;
      right: -.16rem;
      top: 0;
      bottom: 0;
      margin: auto;
      width: .02rem;
      height: .2rem;
      color: rgba(255, 255, 255, .75);
    }

    &:last-child::after {
      display: none;
    }
  }

  &__match-num-line {
    width: .5px;
    height: .2rem;
    background-color: #c5c5c7;
  }

  &__prize-list {
    display: flex;
    margin: .26rem .24rem 0;
  }


  &__prize-item {
    flex-shrink: 0;
    margin-right: .18rem;

    &:last-child {
      margin-right: 0;
    }
  }

  &__prize-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .82rem;
    height: .82rem;
    background: rgba(105, 105, 105, .20);
  }

  &__prize-img {
    width: .66rem;
    height: .66rem;
  }

  &__prize-name {
    text-align: center;
    font-size: .18rem;
    color: #212124;
    width: .82rem;
    line-height: .28rem;
    @include more-lines-ellipsis(.56rem, 2);
  }

  &__prize-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .08rem;
  }

  &__prize-default {
    width: 2.84rem;
    height: 1.5rem;
    margin: .08rem auto 0;
  }

  &__prize-default-inner {
    height: 1.5rem;
    object-fit: contain;
  }

  &__button {
    &.btn-primary-long {
      @include primary-btn($fontsize:.32rem,$width: 3.32rem,$height:.48rem,$line-height:.48rem);
      background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-btn-332.png) no-repeat center / 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    &.btn-secondary-long {
      @include secondary-btn($fontsize:.32rem,$width: 3.32rem,$height:.48rem,$line-height:.48rem);
      background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-btn-black.png) no-repeat center / 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    &.btn-disable-long {
      @include disabled-btn($fontsize:.32rem,$width: 3.32rem,$height:.48rem,$line-height:.48rem);
      background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-btn-l-disable.png) no-repeat center / 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      color: #fff;
      font-family: 'PEACE';
    }
  }
}