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

.press-data {
  box-shadow: 0px 0px 10px rgba(83, 71, 134, .38);
  margin: 0 auto;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;

  width: 7.5rem;
  padding: 0;

  &__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;
    height: .64rem;
    color: #fff;
    font-size: $font-xs;
    line-height: .44rem;
    letter-spacing: -1px;
    width: fit-content;
    padding: 0 .48rem;
    box-sizing: border-box;
  
    p {
      text-align: center;
      width: 1rem;

      &:first-of-type {
        width: .66rem;
      }
  
      &:nth-of-type(2) {
        min-width: 1.3rem;
        @extend %t-ellipsis;
        text-align: left;
      }
    }
  }
  
  
  &__item {
    width: fit-content;
    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;

    padding: 0 .48rem;
    box-sizing: border-box;
  
    &.press-data__item--highlight {
      background: linear-gradient(90.06deg, #5400d6 15.83%, #6000fa 95.19%);
      -webkit-box-shadow: 0px 2px 4px rgb(0 0 0 / 25%);
      box-shadow: 0px 2px 4px rgb(0 0 0 / 25%);
      height: 1rem;
      color: #fff;
  
      &::after {
        content: none;
      }

      p {
        color: #fff;

      }
    }
  
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      border-bottom: 1px solid #dddfe1;
      bottom: 0;
      left: 0;
    }
      
    p {
      text-align: center;
      font-family: 'AgencyFB-Bold';
      color: #212124;
      font-size: .28rem;
      width: 1rem;

      &:first-of-type {
        min-width: 1.3rem;
        font-size: .24rem;
        text-align: left;
        @extend %t-ellipsis;
      }
    }
  }
  
}