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

.press-match {
  position: relative;
  display: flex;
  width: vw(301);
  height: vw(168);
  margin-right: vw(4);
  margin-bottom: vw(4);

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

  &:nth-child(odd) {
    &:last-child {
      margin-right: vw(305);
    }
  }


  &__main {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: vw(35);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/down-bg-new.png) no-repeat left bottom;
    background-size: contain;
  }

  &__brand {
    display: block;
    width: vw(290.5);
    height: vw(50);
    margin: 0 auto;
    mask: radial-gradient(circle at 70% 0%, transparent vw(3), #1d6cca 0),
      radial-gradient(circle at 0, transparent vw(2.5), #1d6cca 0) 0 / 100% vw(7);
    -webkit-mask-composite: source-in;

    /*chrome*/
    mask-composite: intersect;

    /*Firefox*/
  }

  &__left {
    flex: 1;
    overflow: hidden;
  }

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

    &__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%;
    }
  }

  &__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 {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: vw(24);

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      content: '';
      width: vw(2);
      height: vw(60.5);
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/line.png) no-repeat center;
      background-size: contain;
    }
  }

  &--empty {
    padding-right: vw(8);
  }

  &__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;
    }

    p {
      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;

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

      @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(10) vw(8) 0 vw(4);
    overflow: hidden;
  }

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

    @include single-line-ellipsis();
  }

  &__btn--sign {
    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/home/confirm.png) no-repeat center;
    background-size: contain;
  }

  &__btn--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;
  }

  &__btn--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(3);
    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;

    @include single-line-ellipsis;
  }

  &__signed__tag {
    position: absolute;
    top: 0;
    right: vw(3);
    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;
  }

  &__loc {
    position: absolute;
    left: vw(24);
    top: vw(6);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: vw(49);
    height: vw(16);
    color: #b3cde8;
    font-size: vw(8);
    padding: 0 vw(5);
    background: rgba(0, 0, 0, .5);
    border-radius: vw(2);
  }
}