@import 'press-ui/common/style/smoba/layout.scss';
@import 'press-ui/common/style/smoba/mixin.scss';


.press-match {
  position: relative;
  display: flex;
  width: 5.84rem;
  height: 2.44rem;
  margin-right: .2rem;
  margin-bottom: .16rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/match-bg-new.png) no-repeat center center;
  background-size: contain;

  &:nth-child(even) {
    margin-right: 0;
  }

  &:nth-child(odd) {
    &:last-child {
      margin-right: 6.04rem;
    }
  }

  &.press-match__banner {
    &:nth-child(even) {
      margin-right: 0;

      &:last-child {
        margin-right: 0;
      }
    }

    &:nth-child(odd) {
      margin-right: .2rem;

      &:last-child {
        margin-right: 6.04rem;
      }
    }
  }

  &__arena__tag {
    position: absolute;
    top: 0;
    right: 1.72rem;
    font-size: 0;
    width: 1.22rem;
    height: .4rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/arena-tag.png) no-repeat center center / 100% 100%;
    z-index: 2;
  }


  &__left {
    position: relative;
    flex: 1;
    padding-left: .3rem;
    overflow: hidden;
  }

  &__name {
    display: flex;
    align-items: center;
    padding: .16rem 0 .1rem 0;

    &__desc {
      font-size: .24rem;
      color: $color-white;
      padding-right: .1rem;
      line-height: .3rem;
      max-width: 2.72rem;

      @include single-line-ellipsis();
    }

    &__width {
      max-width: 100%;
    }

    &__arena {
      max-width: 1.9rem;
    }
  }

  &__award__tag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: .85rem;
    height: .24rem;
    font-size: .16rem;
    color: #13233c;
    font-weight: 600;
    padding: 0 .04rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/match-tag.png) no-repeat center;
    background-size: contain;

    p {
      @include single-line-ellipsis();
    }
  }

  &__awards {
    display: flex;
    align-items: flex-start;
  }

  &__award {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1.02rem;
    margin-right: .18rem;
    flex-shrink: 0;

    &:last-child {
      margin-right: 0;
    }

    &__img {
      display: block;
      width: 1.02rem;
      height: 1rem;
      margin-bottom: .08rem;
      background: #13233c;
      border: .02rem solid #5e95d0;
    }

    &__name {
      font-size: .16rem;
      color: $color-white;
      text-align: center;
    }
  }

  &__award__type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.02rem;
    padding: .02rem .04rem;
    background: #062e58;

    &__name {
      color: #d2e2f4;
      text-align: center;
      font-size: 8px;

      @include single-line-ellipsis();
    }
  }

  &__award__name {
    height: .44rem;
    line-height: .22rem;

    @include more-lines-ellipsis(.44rem, 2);
  }

  &__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1.77rem;
    padding: .3rem .16rem 0 .22rem;
    overflow: hidden;

    &__img {
      display: block;
      width: .8rem;
      height: .8rem;
      border: .02rem solid #6d8ac3;
      background-color: #13233c;
    }
  }

  &__time {
    color: #b3cde8;
    font-size: .16rem;
    margin-top: .1rem;

    @include single-line-ellipsis();
  }

  &__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'GAMEFONT';

    &--sign {
      width: 1.26rem;
      height: .48rem;
      font-size: .26rem;
      color: $color-white;
      margin-top: .16rem;
      padding-top: .06rem;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/confirm.png) no-repeat center;
      background-size: contain;
    }

    &--end {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'GAMEFONT';
      width: 1.26rem;
      height: .48rem;
      font-size: .26rem;
      color: $color-white;
      margin-top: .16rem;
      padding-top: .06rem;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/btn-secondary-bg-xs.png) no-repeat center;
      background-size: contain;
    }

    &--ing {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'GAMEFONT';
      width: 1.26rem;
      height: .48rem;
      font-size: .26rem;
      color: $color-white;
      margin-top: .16rem;
      padding-top: .06rem;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/btn-secondary-bg-xs.png) no-repeat center;
      background-size: contain;
    }
  }

  &__tag {
    position: absolute;
    top: 0;
    right: -.02rem;
    width: .33rem;
    height: .82rem;
    font-size: .18rem;
    color: #fff;
    font-weight: 600;
    padding: .04rem 0 .04rem .04rem;
    letter-spacing: .02rem;
    writing-mode: vertical-lr;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/btn-tag.png) no-repeat center;
    background-size: contain;
  }

  &__signed__tag {
    position: absolute;
    top: 0;
    right: -.02rem;
    width: .32rem;
    height: .82rem;
    font-size: .18rem;
    color: #fff;
    font-weight: 600;
    padding: .04rem 0 .04rem .04rem;
    letter-spacing: .02rem;
    writing-mode: vertical-lr;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/yellow-tag.png ) no-repeat center;
    background-size: contain;

    @include single-line-ellipsis;
  }
}

.default-award {
  padding-right: .3rem;
}