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

.press-list {
  width: 7.02rem;
  margin: .32rem auto 0;
  box-shadow: 0px 0px 10px rgb(83 71 134 / 38%);
  background: #fff;


  &__head {
    @include flex-content;
    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;
    font-size: $font-xs;
    line-height: .44rem;
    letter-spacing: -1px;
    box-sizing: border-box;
    padding: 0 .16rem;
  }

  &__head-cell {
    text-align: left;
    flex: 1;
  
    &:nth-child(1) {
      flex: 1;
    }
  
    &:nth-child(2) {
      flex: 2;
    }
  
    &:nth-child(3) {
      flex: 2;
    }
  
    &:nth-child(4) {
      flex: 1;
      text-align: right;
    }
  }

  &__box {
    overflow: hidden;

    &--open {
      background: rgba(223, 218, 255, .7);

      .press-list__detail-head {
        background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/table-tbody--open.png) center top;
        background-size: cover;
        background-repeat: no-repeat;
        width: 6.78rem;
        height: .64rem;
      }
    }

    &:nth-child(even) {
      &.press-list__box--open {
        .press-list__rank-item {
          background: none;
        }
      }
    }
  }


  &__rank-item {
    background: none;
    border-bottom: .02rem solid #dddfe1;
  
    padding: 0 .16rem;
    @include flex-content;
    font-size: $font-s;
    line-height: .88rem;
    color: $color-main;

    &--highlight {
      background: linear-gradient(90.06deg, #5400d6 15.83%, #6000fa 95.19%);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, .25);
      padding: 0 .2rem 0 .16rem;
      color: #fff;
    }
  }

	
  &__rank-cell {
    font-family: 'AgencyFB-Bold';
    font-size: .28rem;
    text-align: left;

    &:nth-child(1) {
      flex: 1;
    }

    &:nth-child(2) {
      flex: 2;
      font-weight: 200;
      font-family: inherit;
      @extend %t-ellipsis;
    }

    &:nth-child(3) {
      flex: 2;
			
    }

    &:nth-child(4) {
      flex: 1;
      text-align: right;
    }

    &--number {
      font-size: $font-m;
      font-family: 'AgencyFB-Bold';
  
      .press-list__rank-text {
        display: block;
        width: .66rem;
        text-align: center;

        &--no-1 {
          width: .4rem;
          height: .44rem;
          text-indent: -1000em;
          overflow: hidden;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--1.png) no-repeat;
          background-size: 100% 100%;
        }
    
        &--no-2 {
          width: .4rem;
          height: .44rem;
          text-indent: -1000em;
          overflow: hidden;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--2.png) no-repeat;
          background-size: 100% 100%;
        }
    
        &--no-3 {
          width: .4rem;
          height: .44rem;
          text-indent: -1000em;
          overflow: hidden;
          background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--3.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    &--score {
      .press-list__rank-text {
        font-size: $font-m;
        font-family: 'AgencyFB-Bold';
      }
    }
  }

  &__detail {
    background: rgba(255, 255, 255, .25);
    width: 6.78rem;
    margin: 0 auto .16rem;

  
  }

  &__detail-head {
    @include flex-content;
    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;
    font-size: $font-xs;
    line-height: .44rem;
    letter-spacing: -1px;
    box-sizing: border-box;
    padding: 0 .16rem;
    padding: 0 .64rem;
    width: 6.78rem;
    margin: 0 auto;
  }

  &__detail-head-cell {
    text-align: left;
    flex: 1;

    &:nth-child(1) {
      flex: 1;
    }
  
    &:nth-child(2) {
      flex: 1;
      text-align: center;
    }
  
    &:nth-child(3) {
      flex: 1;
      text-align: right;
    }
  }

  .press-list__detail-item {
    padding: 0 .64rem;
    width: 100%;
    background: none;
    box-sizing: border-box;

    .press-list__detail-cell {
      text-align: left;
    
      &:nth-child(1) {
        flex: 1;
      }
    
      &:nth-child(2) {
        flex: 1;
        text-align: center;
      }
    
      &:nth-child(3) {
        flex: 1;
        text-align: right;
      }
    }
  }

  &__detail-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;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      border-bottom: 1px solid #dddfe1;
      bottom: 0;
      left: 0;

    }
  }

  &__detail-cell {
    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;
    }
  }
}