// @import 'src/pages/base-pro/mixin.scss';
@import 'press-ui/common/style/smoba/mixin.scss';

.press-match {
  display: flex;
  align-items: center;
  width: calc((100% - .24rem) / 2);
  height: 1.6rem;
  width: 5.5rem;
  margin-bottom: .2rem;
  padding-left: .3rem;
  margin-right: .2rem;
  border: .01rem solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background: url(https://image-1251917893.cos.ap-guangzhou.myqcloud.com/Esports/hor/new-home/simple-match-primary-bg.png) no-repeat center center;
  background-size: contain;

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

  &__pic {
    width: .88rem;
    height: .88rem;
    border: .02rem solid #285285;
    background: #285285;
  }

  &__info {
    flex: 1;
    padding-left: .2rem;
    padding-right: .16rem;
    overflow: hidden;
  }

  &__name {
    font-size: $font-s;
    background: linear-gradient(90deg, #d9f7ff 100%, #e7fbff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: .08rem;
    line-height: .28rem;
    font-weight: 600;

    @include single-line-ellipsis;
  }

  &__desc {
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
  }

  &__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .24rem;
    padding: .02rem .08rem;
    background-image: linear-gradient(to bottom right, #174988 0%, #103b75 20%, #174989 80%, #174988 100%);
    color: #afd0f6;
    font-size: .16rem;
    margin-bottom: .06rem;
    margin-right: .08rem;

    &:last-of-type {
      margin-right: 0;
    }
  }

  &__tag-name {
    font-size: .16rem;
    color: #afd0f6;
  }

  &__tag-icon {
    width: .12rem;
    height: .18rem;
    margin-right: .04rem;
    font-size: .16rem;
    margin-top: .04rem;
    color: #afd0f6;
  }

  &__time {
    font-size: $font-xxxs;
    color: #77a7df;
    line-height: .26rem;

    @include single-line-ellipsis;
  }

  &__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1.24rem;
    margin-right: .24rem;

    .press-match__status-name {
      font-family: 'GAMEFONT';
      font-size: $font-xxs;
      color: #7db4f5;

      @include single-line-ellipsis;
    }

    &--end {
      background: url(https://image-1251917893.cos.ap-guangzhou.myqcloud.com/Esports/hor/new-home/simple-match-secondary-bg.png) no-repeat center center;
      background-size: contain;

      .press-match__status-name {
        color: rgba(125, 180, 245, .40);
      }
    }
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.28rem;
    height: .48rem;
    font-weight: 600;
    font-size: $font-xm;
    color: #fff;
    margin-top: .16rem;
    background: url(https://image-1251917893.cos.ap-guangzhou.myqcloud.com/Esports/hor/new-home/simple-match-btn-bg.png) no-repeat center center;
    background-size: contain;
  }
}