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

.press-owner {
  display: flex;
  flex-direction: column;
  width: 13.68rem;
  height: 100%;
  margin: 0 auto;

  ::v-deep {
    .press-index__sidebar {
      padding-left: .47rem;
      background-position: .14rem top;
    }

    .press-index__circle {
      left: .12rem;
    }

    .press-index__sidebar--active {
      left: -.32rem;
    }
  }

  &__main {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  &__header-right {
    display: flex;
    align-items: center;
  }

  &__matches,
  &__rank {
    min-width: 0;
    width: 0;
    flex: 1;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  &__matches-list {
    position: relative;
    display: flex;
    align-content: baseline;
    flex-wrap: wrap;
    height: 100%;
    overflow-y: scroll;
  }

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

    &::before {
      position: absolute;
      left: 0;
      right: 70%;
      top: 0;
      bottom: 0;
      margin: auto;
      content: '';
      height: 1px;
      background: rgba(44, 82, 129, .5);
    }

    &::after {
      position: absolute;
      left: 70%;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      content: '';
      height: 1px;
      background: rgba(44, 82, 129, .5);
    }
  }

  &__header-register {
    width: 1.8rem;
    height: .52rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/owner/become-owner.png) no-repeat right top;
    background-size: cover;
  }

  &__header-info {
    display: flex;
    align-items: center;
  }

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

  &__header-name {
    font-family: 'GAMEFONT';
    font-size: $font-xxs;
    color: $color-white;
    padding: 0 .22rem 0 .06rem;
  }

  &__header-desc {
    position: relative;
    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;
    }
  }

  &__recommend {
    min-width: 0;
    width: 0;
    flex: 1;
    height: 100%;
    padding-bottom: .4rem;
    margin: 0 auto;
    overflow-y: scroll;
  }

  &__recommend-list {
    display: flex;
    align-content: baseline;
    flex-wrap: wrap;
    width: 100%;
  }

  &__title {
    display: flex;
    align-items: center;
    width: 8.12rem;
    height: .56rem;
    font-family: 'GAMEFONT';
    font-size: $font-s;
    color: $color-white;
    padding-left: .24rem;
    margin-bottom: .12rem;
    margin-left: .06rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor-web/home/guide-bg.png) no-repeat center center;
    background-size: contain;

    p {
      &:last-child {
        position: relative;
        font-family: auto;
        font-size: .16rem;
        color: #82a0cc;
        padding-left: .06rem;
      }
    }
  }

  &__rank {
    display: flex;
    flex-direction: column;
  }

  &__custom-empty {
    padding-top: .8rem;
    justify-content: flex-start;

    .press-owner__empty-description {
      font-size: $font-xs;
      color: #77a7df;
      text-align: center;
      line-height: .27rem;
      margin-top: 0;
    }
  
    .press-owner__btn--primary {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.24rem;
      height: .56rem;
      margin: auto;
      font-family: 'GAMEFONT';
      font-size: .26rem;
      color: $color-white;
      background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/btn-confirm-bg-xl.png) no-repeat center;
      background-size: contain;
      margin-top: .32rem;
    }
  }
}