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

.press-meta {
  box-sizing: border-box;
  width: 100vw;
  height: 1.66rem;
  padding: .19rem .48rem .16rem;
  margin: -.5rem auto 0;
  position: relative;
  z-index: 1;
  @include flex-content($align: flex-start);
  background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-map.png) no-repeat;
  background-size: 100% auto;


  &__title {
    height: .4rem;
    font-size: $font-m;
    line-height: .4rem;
    color: $color-white;
    font-weight: 400;


    &--location {
      text-align: left;
      font-size: .2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: .06rem 0 0 0;
      font-weight: normal;
      padding-left: .14rem;

      .span {
        display: inline-block;
        max-width: 5.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .icon-location {
        display: inline-block;
        color: rgba(255, 255, 255, .75);
        font-size: .24rem;
      }
    }

    &.no-bold {
      font-weight: normal;
    }

    &.title-link {
      position: relative;
      font-weight: bold;
    }

    p {
      max-width: 3.8rem;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include inline-vertical-content;
    }
  }

  &__canceled {
    color: #ffbf00;
    font-size: .24rem;
    line-height: .32rem;
    margin-top: .08rem;
  }

  &__labels {
    @include flex-content($justify: flex-start);
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 0 0 0;

    i {
      width: .24rem;
      margin: 0 .08rem 0 0;
      color: #4f4f52;

      &.icon-top {
        color: rgba(255, 255, 255, .75);
      }

      &.icon-time {
        font-size: .22rem;
        color: rgba(255, 255, 255, .75);
      }

      &.icon-location {
        font-size: .22rem;
      }

      &.icon-wx {
        font-size: .22rem;
      }

      &.icon-mine-bottom {
        font-size: .18rem;
      }
    }

    .span {
      @include flex-content;
      padding: 0 .14rem;
      margin-right: .12rem;
      line-height: .4rem;
      font-size: $font-xs;
      display: flex;
      align-items: center;

      margin-top: .08rem;
      flex-shrink: 0;
      color: $color-white;
      background: rgba(255, 255, 255, .1);
    

      &.tag-purple {
        color: #4712b8;
      }

      &.tag-green {
        color: #158c56;
      }
    }

    &--yellow {
      i.icon-time {
        color: #ffbf00;
      }

      .span { 
        color: #ffbf00;
        background: transparent;
      }
    }
  }
}