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

.press-match {
  display: flex;
  align-items: center;
  width: calc((100% - .24rem) / 2);
  height: 1.6rem;
  margin-bottom: .2rem;
  padding-left: .3rem;
  border: .01rem solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(145deg, #3d84bd 0%, #274f85 50%), linear-gradient(45deg, rgba(79, 154, 223, .7), rgba(7, 57, 116, .49));

  &--left {
    margin-right: .24rem;
  }

  &__pic {
    width: .76rem;
    height: .76rem;
    border-radius: 50%;
    background: #072e58;
  }

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

  &__name {
    font-size: $font-s;
    color: #d2e2f4;
    font-weight: 600;
    padding-bottom: .06rem;
    line-height: .4rem;

    @include single-line-ellipsis;
  }

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

  &__distance {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: .84rem;
    height: .32rem;
    padding: 0 .1rem;
    background: rgba(0, 0, 0, .5);
    border-radius: .04rem;
    margin-bottom: .06rem;
  }

  &__distance-name {
    font-size: .16rem;
    color: #b3cde8;
  }

  &__distance-icon {
    width: .12rem;
    height: .18rem;
    margin-right: .04rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/home/address-icon.png) no-repeat center center;
    background-size: contain;
  }

  &__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: .78rem;
    height: .22rem;
    line-height: .22rem;
    font-size: .16rem;
    color: $color-white;
    margin-left: .04rem;
    margin-bottom: .06rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/home/tag-s.png) no-repeat center center;
    background-size: 100% 100%;
  }

  &__tag-name {
    padding: 0 .12rem;

    @include single-line-ellipsis;
    max-width: 1.06rem;
  }

  &__time {
    font-size: $font-xxxs;
    color: #77a7df;

    @include single-line-ellipsis;
  }

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

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

      @include single-line-ellipsis;
    }

    &--playing {
      .press-match__status-name {
        color: #77a7df;
      }
    }

    &--end {
      background-image: linear-gradient(45deg, #24456d 0%, #183150 100%), linear-gradient(45deg, rgba(39, 96, 175, .5), #152f4e);

      .press-match__status-name {
        color: #4f6f95;
      }
    }

    &--pending {
      .press-match__status-name {
        color: #f5b74c;
      }
    }
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .94rem;
    height: .42rem;
    font-family: 'GAMEFONT';
    font-size: $font-xs;
    color: #a1c5ec;
    margin-top: .16rem;
    padding-top: .04rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/home/small-btn.png) no-repeat center center;
    background-size: contain;
  }
}