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

.press-owner-rank-focus {
  display: flex;
  align-content: baseline;
  flex-wrap: wrap;
  width: 100%;
}

.press-owner-rank {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__info {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 0;
    flex: 1;
  }

  &__info-img {
    width: .6rem;
    height: .6rem;
    border: 1px solid #69abe8;
    background: #69abe8;
  }

  &__info-detail {
    max-width: 82%;
    padding-left: .12rem;
    padding-right: .24rem;
  }

  &__flex {
    display: flex;
  }

  &__info-name {
    font-size: .2rem;
    color: #d2e2f4;
    max-width: 2rem !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    @include single-line-ellipsis;
  }

  &__info-fans {
    font-size: .16rem;
    color: #82a0cc;
    position: relative;
    margin-top: .1rem;
    display: flex;

    .press-owner-rank__info-game {
      width: 1.2rem;
      margin-left: .4rem;
      white-space: nowrap;
    }

    .press-owner-rank__info-color {
      color: #ffb134
    }

    .press-owner-rank__info-friend {
      margin-left: .1rem;
      line-height: .28rem
    }

    .press-owner-rank__info-friend-focus {
      // top: 2px;
      margin-left: .05rem;
      // position: absolute;
      max-width: 1.6rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  }

  &__info-lv {
    position: relative;
    top: -.18rem;
    display: flex;
    align-items: center;
    height: .22rem;
    font-size: .16rem;
    color: #57301b;

    p {
      line-height: .22rem;
      padding-right: .11rem;
      padding-left: .18rem;
      border-top-right-radius: .22rem;
      border-bottom-right-radius: .22rem;
      background-image: linear-gradient(to left, #f6d496 0%, #f3ddac 40%, #c8a15a 100%);
    }

    &::before {
      position: absolute;
      left: -.14rem;
      top: -.06rem;
      content: '';
      width: .36rem;
      height: .3rem;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/home/owner-icon.png) no-repeat center;
      background-size: contain;
      z-index: 3;
    }
  }

  &__focus-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .94rem;
    height: .42rem;
    font-family: 'GAMEFONT';
    font-size: $font-xs;
    color: #a1c5ec;

    &--focused {
      color: #82a0cc;
    }
  }

  &__focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .8rem;
    height: .4rem;
    font-family: 'GAMEFONT';
    font-size: $font-xxs;
    color: #b0d3fd;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/teamzone/btn-invite.png) no-repeat center center;
    background-size: contain;

    &--focused {
      color: #93969b;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/grey-btn.png) no-repeat center;
      background-size: contain;
    }

    &--transparent-bckground {
      color: #b0d3fd;
      background: transparent;
    }
  }
}

.press-match {
  display: flex;
  align-items: center;
  width: calc((100% - .48rem) / 2);
  height: 1.2rem;
  margin-bottom: .2rem;
  padding-left: .3rem;
  border: .01rem solid transparent;
  margin-right: .24rem;
  background: linear-gradient(108.69deg, #3d84bd 0%, #274f85 65.31%),
    linear-gradient(93.39deg, #4f9adf -1.02%, rgba(7, 57, 116, .49) 105.21%);

  &__member {
    display: flex;
    align-items: center;
    height: .28rem;

    img {
      width: .28rem;
      height: .28rem;
      border-radius: 50%;
      background: $color-white;
      margin-left: -.12rem;

      &:first-child {
        margin-left: 0;
      }
    }

    p {
      padding-left: .1rem;
      padding-right: .2rem;
    }
  }

  .press-owner-rank {
    &__info-lv {
      top: 0;
      margin-left: .2rem;
    }

    &__info-name {
      font-size: .2rem;
      color: #d2e2f4;
    }
  }

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

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

::v-deep .press-empty--hor .press-empty__description {
  max-width: 5rem;
}