@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: 0 0 10px rgba(83, 71, 134, .38);
  
  &__head {
    @include flex-content;
    height: .44rem;
    padding: 0 .24rem;
    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;
  }

  &__head-cell {
    flex: 1;
    text-align: center;
    
    &:first-of-type {
      flex: 1.6;
      text-align: left;
    }
  }
  
  
  &__mine {
    width: 7.02rem;
    height: .6rem;
    padding: 0 .24rem;
    @include flex-content;
    line-height: .6rem;
    font-size: $font-xs;
  
    color: $color-main;
    background: linear-gradient(90.06deg, #5400d6 15.83%, #6000fa 95.19%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .25);
    height: 1rem;
    padding: 0 .16rem;
    
    p {
      flex: 1;
      text-align: center;
      font-weight: 200;
      color: $color-white;
      font-size: .28rem;
      font-family: 'AgencyFB-Bold';
  
      &:first-of-type {
        flex: 1.6;
        text-align: left;
        font-size: .24rem;
        @extend %t-ellipsis;
      }
    }
  }
  
  &__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;
  
    &--active {
      color: #5300c3;
  
      p {
        &:first-of-type {
          color: #5300c3;
        }
      }
    }
  
    &::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;
      }
    }
  }
}