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


.press-data {
  width: 7.02rem;
  margin: .32rem auto 0;
  box-shadow: 0px 0px 10px rgba(83, 71, 134, .38);
  background: #fff;
}


.press-data__top {
  .p {
    display: flex;
  }

  &::after {
    font-family: 'iconfont' !important;
    font-size: .32rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e01f';
    color: #212124;
    font-size: .28rem;
    width: .12rem;
    height: .24rem;
    line-height: .24rem;
  }

  &.press-data__top--open {
    &::after {
      transform: rotate(90deg);
    }
  }
}

.press-data__top--highlight {
  width: 7.02rem;
  height: .88rem;
  padding: 0 .32rem;
  @include flex-content;
  line-height: .88rem;
  font-size: $font-m;
  box-sizing: border-box;
  border-radius: 2px 2px 0 0;

  background: linear-gradient(90.06deg, #5400d6 15.83%, #6000fa 95.19%);
  box-shadow: 0 .04rem .08rem rgba(0, 0, 0, .25);
  padding: 0 .2rem 0 .16rem;

  &::after {
    font-family: 'iconfont' !important;
    font-size: .32rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e01f';
    color: #fff;
    font-size: .28rem;
    width: .12rem;
    height: .24rem;
    line-height: .24rem;
  }

  .p {
    color: $color-white;
    font-family: 'AgencyFB-Bold';

    &:first-of-type {
      width: 3.6rem;
      text-align: left;
      @extend %t-ellipsis;
    }
  }
	
  .span {
    font-family: 'AgencyFB-Bold';
    font-size: .36rem;
    padding: 0 .1rem;
  }
	
  .i {
    font-size: $font-s;
  }
}

.press-data__top--normal {
  width: 7.02rem;
  height: .88rem;
  padding: 0 .32rem;
  @include flex-content;
  line-height: .88rem;
  font-size: $font-m;
  box-sizing: border-box;
  border-radius: 2px 2px 0 0;
  
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/table-topbar.png) center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 .2rem 0 .16rem;
  box-sizing: border-box;

  .p {
    color: #212124;
    font-family: 'AgencyFB-Bold';
    line-height: .92rem;
    display: flex;

    &:first-of-type {
      width: 3.6rem;
      text-align: left;
      @extend %t-ellipsis;
    }
  }
	
  .span {
    font-family: 'AgencyFB-Bold';
    font-size: .36rem;
    padding: 0 .1rem;
  }
	
  .i {
    font-size: $font-s;
  }
}

.press-data__detail-head {
  box-sizing: border-box;
  padding: 0 .16rem;
  @include flex-content;
  font-size: $font-xs;
  line-height: .44rem;
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/table-thead-bg.png) center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 7.02rem;
  height: .64rem;
  color: #fff;
  letter-spacing: -1px;
	
  .p {
    flex: 1;
    text-align: center;

    &:first-of-type {
      flex: 1.6;
      text-align: left;
      @extend %t-ellipsis;
    }
  }
}

.press-data__item {
  width: 7.02rem;
  height: .6rem;
  padding: 0 .24rem;
  @include flex-content;
  line-height: .6rem;
  font-size: $font-xs;

  background: #fff;
  font-size: .28rem;
  height: .8rem;
  padding: 0 .16rem;
  position: relative;

  &--highlight {
    color: #5300c3;

    .p {
      flex: 1;
      text-align: center;
      color: $color-white;
      font-size: .28rem;
      font-family: 'AgencyFB-Bold';

      &:first-of-type {
        color: #5300c3;
        flex: 1.6;
        text-align: left;
        font-size: .24rem;
        @extend %t-ellipsis;
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #dddfe1;
    bottom: 0;
    left: 0;
  }
  
  .p {
    flex: 1;
    text-align: center;
    font-family: 'AgencyFB-Bold';
    color: #212124;
    font-size: .28rem;
    
    &:first-of-type {
      flex: 1.6;
      font-size: .24rem;
      text-align: left;
      @extend %t-ellipsis;
    }
  }
}