@import 'press-ui/common/style/smoba/layout.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;
  }

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


.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 {
  ::v-deep {
    .press-list__finished,
    .press-list__loading {
      width: vw(584);
    }
  }
}

.press-index__offline {
  ::v-deep {
    .press-list__finished,
    .press-list__loading {
      width: vw(602);
    }
  }
}