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

.press-card__sign-up {
  width: 100%;
  height: auto;
  margin-top: .28rem;

  @include flex-content($justify: flex-start, $direction: column);
}



.press-card__sign-up-title {
  margin-bottom: .28rem;
  color: #212124;
  font-size: .32rem;
  line-height: .48rem;
  text-align: center;
  font-weight: bold;
  height: .56rem;

  & + .press-card__countdown-wrap {
    margin-top: 0;
  }
}

.press-card__countdown-wrap {
  align-items: flex-start;
  padding: .7rem .24rem .5rem;
  margin-top: .56rem;

  @include flex-content($justify: center);

  .press-card__countdown-colon {
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/colon.png)
      center top;
    background-size: 100%;
    background-repeat: no-repeat;
    width: .08rem;
    height: .28rem;
    margin: .56rem .08rem 0;
  }

  .press-card__countdown-item {
    width: 1.34rem;
    height: 1.38rem;
    background: rgba(0, 0, 0, .25);
    border-radius: .08rem;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: 1.26rem;
      height: .02rem;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(
        90deg,
        rgba(217, 217, 217, 0) 5.88%,
        rgba(217, 217, 217, .503784) 47.77%,
        rgba(217, 217, 217, 0) 95.59%
      );
    }

    .press-card__countdown-number {
      display: block;
      text-align: center;
      font-family: 'AgencyFB-bold';
      font-size: .48rem;
      color: $color-white;
      line-height: .74rem;
      border-radius: .04rem;
    }
  }

  // em {
  //   font-size: $font-xm;
  //   color: $color-white;
  //   line-height: .44rem;
  //   width: 100%;
  //   text-align: center;
  //   display: block;
  //   color: rgba(255, 255, 255, .3);
  //   font-size: .2rem;
  // }
}

.press-card__sign-up-countdown {
  position: relative;
  margin-top: 0;
  padding-top: 1.6rem;
  width: 7.48rem;
  height: 4.88rem;
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/signup-countdown-new.png)
      no-repeat;
  box-sizing: border-box;
  background-size: 100%;

  .press-card__sign-up-title {
    margin-top: .34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .32rem;
    font-family: 'PEACE';
    z-index: 10;
    position: relative;
    font-weight: 400;

    &::before {
      content: '';
      width: 1.76rem;
      height: .02rem;
      margin-right: .16rem;
      background: linear-gradient(
        90deg,
        rgba(135, 114, 227, .75) 4.55%,
        rgba(211, 205, 238, 0) 86.93%
      );
      transform: matrix(-1, 0, 0, 1, 0, 0);
    }

    &::after {
      content: '';
      width: 1.76rem;
      height: .02rem;
      margin-left: .16rem;
      background: linear-gradient(
        90deg,
        rgba(135, 114, 227, .75) 4.55%,
        rgba(211, 205, 238, 0) 86.93%
      );
    }
  }

  .press-card__countdown-wrap {
    padding: 0;
    background: none;
    z-index: 10;
    position: relative;

    .press-card__countdown-item {
      .press-card__countdown-number {
        line-height: .74rem;
      }
    }

    // em {
    //   color: #000;
    //   font-style: normal;
    // }
  }

  .press-card__countdown-colon {
    margin: 0 .16rem .26rem;
    width: .14rem;
    height: .74rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/colon-black.png)
      no-repeat;
    background-size: 100%;
    font-size: 0;
  }

  .press-card__countdown-text {
    color: #212124;
    font-size: .48rem;
    font-weight: 700;
    margin: 0 .18rem;
  }

  .press-card__countdown-item {
    width: .8rem;
    height: .74rem;
    border-radius: 0;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/countdown.png)
      no-repeat;
    background-size: 100%;
  }
}

.press-card__countdown-wrap {
  background: url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/mask-count-content.png')
    center top no-repeat;
  background-size: 100% auto;
}

.match-detail--horz {
  .press-card__sign-up-countdown {
    background: none;
    padding-top: 0;
  }

  .press-card__sign-up-title {
    font-size: .32rem;

    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }

  .press-card__countdown-wrap {
    padding: .7rem .24rem .5rem;
    background: url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/mask-count-content.png')
      center top no-repeat;
    background-size: 100% auto;

    .press-card__countdown-item {
      .press-card__countdown-number {
        line-height: .74rem;
      }
    }

    // em {
    //   color: rgba(255, 255, 255, .3);
    // }

    .press-card__countdown-colon {
      margin-top: .44rem;
      background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/horizon/colon.png)
        center top;
      background-size: 100%;
    }
  }

  .press-card__countdown-item {
    width: 1.34rem;
    height: 1.38rem;
    background: rgba(0, 0, 0, .25);
    border-radius: .08rem;
    position: relative;
  }
}