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


.press-match {
  position: relative;
  display: flex;
  width: vw(292);
  height: vw(122);
  margin-right: vw(10);
  margin-bottom: vw(8);
  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: vw(302);
    }
  }

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

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

    &:nth-child(even) {
      margin-right: vw(10);

      &:last-child {
        margin-right: vw(302);
      }
    }
  }

  &__arena__tag {
    position: absolute;
    top: 0;
    right: vw(86);
    font-size: 0;
    width: vw(61);
    height: vw(20);
    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: vw(15);
    overflow: hidden;
  }

  &__name {
    display: flex;
    align-items: center;
    padding: vw(8) 0 vw(5) 0;

    &__desc {
      font-size: vw(12);
      color: $color-white;
      padding-right: vw(5);
      line-height: vw(15);

      @include single-line-ellipsis();
      max-width: vw(136);
    }

    &__width {
      max-width: 100%;
    }

    &__arena {
      max-width: vw(140);
    }
  }

  &__award__tag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: vw(42.5);
    height: vw(12);
    font-size: vw(8);
    color: #13233c;
    font-weight: 600;
    padding: 0 vw(2);
    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: vw(51);
    margin-right: vw(9);
    flex-shrink: 0;

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

    &__img {
      display: block;
      width: vw(51);
      height: vw(50);
      margin-bottom: vw(4);
      background: #13233c;
      border: 1px solid #5e95d0;
    }

    &__name {
      font-size: vw(8);
      color: $color-white;
      text-align: center;
    }
  }

  &__award__type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: vw(51);
    padding: 1px vw(2);
    background: #062e58;

    &__name {
      color: #d2e2f4;
      text-align: center;
      font-size: .16rem;

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

  &__award__name {
    height: vw(22);
    line-height: vw(11);

    @include more-lines-ellipsis(vw(22), 2);
  }

  &__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: vw(88.5);
    padding: vw(15) vw(8) 0 vw(11);
    overflow: hidden;

    &__img {
      display: block;
      width: vw(40);
      height: vw(40);
      border: 1px solid #6d8ac3;
      background-color: #13233c;
    }
  }

  &__time {
    color: #b3cde8;
    font-size: vw(8);
    margin-top: vw(5);

    @include single-line-ellipsis();
  }

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

    &--sign {
      width: vw(63);
      height: vw(24);
      font-size: vw(13);
      color: $color-white;
      margin-top: vw(8);
      padding-top: vw(3);
      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: vw(63);
      height: vw(24);
      font-size: vw(13);
      color: $color-white;
      margin-top: vw(8);
      padding-top: vw(3);
      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: vw(63);
      height: vw(24);
      font-size: vw(13);
      color: $color-white;
      margin-top: vw(8);
      padding-top: vw(3);
      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: vw(-1);
    width: vw(16.5);
    height: vw(41);
    font-size: vw(9);
    color: #fff;
    font-weight: 600;
    padding: 2px 0 2px vw(2);
    letter-spacing: 1px;
    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: vw(-1);
    width: vw(16);
    height: vw(41);
    font-size: vw(9);
    color: #fff;
    font-weight: 600;
    padding: 2px 0 2px vw(2);
    letter-spacing: 1px;
    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: vw(15);
}