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

.press-index {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .press-hor-match-header {
    padding-bottom: .02rem;
    padding-left: .4rem;
  }

  &__content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }


  &__header__middle {
    font-family: 'GAMEFONT';
    font-size: .3rem;
    color: transparent;
    padding-left: .16rem;
    background-image: linear-gradient(to bottom, #759ccd 0%, #fff 100%);
    -webkit-background-clip: text;
  }

  &__header__right {
    display: flex;
    align-items: center;
    padding-right: .4rem;
  }

  &__header__info {
    display: flex;
    align-items: center;
    margin-left: .24rem;
  }

  &__header__img {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    border: 1px solid #3366ab;
    background: #3366ab;
  }

  &__header__name {
    font-family: GAMEFONT;
    font-size: .2rem;
    color: #fff;
    padding: 0 .22rem 0 .06rem;
  }

  &__header__desc {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: .22rem;
    font-size: .16rem;
    color: #57301b;

    &::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 50%;
      background-size: contain;
      z-index: 3;
    }

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

  &__header__myaward {
    width: 1.48rem;
    height: .48rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/new-home/my-award-btn.png) no-repeat right top;
    background-size: contain;
  }

  &__header__register {
    margin-left: .24rem;
    width: 1.82rem;
    height: .54rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/new-home/become-owner-btn.png) no-repeat right top;
    background-size: contain;
  }

  &__header__feedback {
    width: 1.04rem;
    height: .4rem;
    margin-left: .24rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/feedback.png) no-repeat center center;
    background-size: contain;
  }

  &__header__message {
    width: 1.04rem;
    height: .4rem;
    margin-left: .24rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/msg-new.png) no-repeat center center;
    background-size: contain;
  }

  &__header__home {
    width: 1.04rem;
    height: .4rem;
    margin-left: .24rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/my.png) no-repeat center center;
    background-size: contain;
  }

  &__recommend {
    position: relative;
    min-width: 0;
    width: 0;
    flex: 1;
    height: 100%;
    margin: 0 auto;
    overflow-y: scroll;
    mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);

    &__list {
      display: flex;
      align-content: baseline;
      flex-wrap: wrap;
    }
  }

  &__offline {
    position: relative;
    min-width: 0;
    width: 0;
    flex: 1;
    height: 100%;
    margin: 0 auto;
    overflow-y: scroll;

    ::v-deep .press-tabs {
      mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
    }
  }

  press-tabs &__offline,
  &__online,
  &__recommend--top {
    padding-top: .16rem;
  }

  &__recommend--new {
    padding-top: .32rem;
  }

  &__online {
    min-width: 0;
    width: 0;
    flex: 1;
    height: 100%;
    margin: 0 auto;
    mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
    overflow: hidden;
  }


  &__online__list {
    position: relative;
    display: flex;
    align-content: baseline;
    flex-wrap: wrap;
  }

  &__online-line {
    width: 100%;

    &-inner {
      position: relative;
      width: 11.18rem;
      font-size: .2rem;
      color: #4f6f95;
      text-align: center;
      margin-top: .06rem;
      margin-bottom: .28rem;

      &::before {
        position: absolute;
        left: 6%;
        right: 64%;
        top: 0;
        bottom: 0;
        margin: auto;
        content: '';
        height: 1px;
        background: linear-gradient(90deg, rgba(44, 82, 129, 0) 0%, #2c5281 100%);
      }

      &::after {
        position: absolute;
        left: 64%;
        right: 6%;
        top: 0;
        bottom: 0;
        margin: auto;
        content: '';
        height: 1px;
        background: linear-gradient(90deg, #2c5281 0%, rgba(44, 82, 129, 0) 100%);
      }
    }
  }


}


.press-red-dot {
  position: relative;

  &:after {
    position: absolute;
    right: .02rem;
    top: .02rem;
    content: '';
    width: .2rem;
    height: .2rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/red-dot.png) no-repeat center center;
    background-size: contain;
  }
}

.press-index__recommend,
.press-index__online,
.press-index__offline {
  position: relative;

  ::v-deep {
    .press-list__finished,
    .press-list__loading {
      width: 12rem;
    }

    .press-tab__text {
      min-width: .96rem;
    }
  }
}

.press-index__gift {
  position: absolute;
  top: .2rem;
  right: .24rem;
  width: 1.49rem;
  height: .48rem;
  z-index: 10;

  img {
    width: 100%;
    height: 100%;
  }
}