@import 'press-ui/common/style/smoba/layout.scss';
@import 'press-ui/common/style/smoba/mixin.scss';
@import '../../common/style/gp-match/palette.scss';
@import '../../common/style/gp-match/mixin.scss';


.press-schedule-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: tovmin(40) tovmin(40) 0;
  position: relative;
  border: 1px solid rgba(252, 252, 252, .60);
  background: linear-gradient(99deg, rgba(230, 234, 239, .95) 11.15%, rgba(255, 255, 255, .95) 63.01%);

  &--selected::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: tovmin(-2);
    left: tovmin(-2);
    border: tovmin(2) solid $color-blue-1;
    pointer-events: none;
  }

  &-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: tovmin(4) tovmin(8);
    font-size: tovmin(22);
    color: $color-white;
    background: #5300c3;
    border-radius: 0 tovmin(8) tovmin(8) 0;
  }

  &-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: tovmin(32);
  }


  .primary-btn {
    @include primary-btn(auto, tovmin(52), tovmin(28));
    line-height: tovmin(52);
    padding: 0 tovmin(20);
    width: auto;
    min-width: 1.18rem;
    height: auto;
    font-size: .24rem
  }

  .border-btn {
    @include secondary-btn(auto, tovmin(52), tovmin(28));
    line-height: tovmin(52);
    padding: 0 tovmin(20);
    width: auto;
    min-width: 1.18rem;
    height: auto;
    color: #fff;
    font-size: .24rem
  }

  .secondary-btn {
    @include secondary-btn(auto, tovmin(52), tovmin(28));
    line-height: tovmin(52);
    border: 0;
    padding: 0 tovmin(20);
    background: $color-gray-7;
    min-width: 1.18rem;
    height: auto;
    color: #fff;
    font-size: .24rem
  }

  .disabled-btn {
    @include secondary-btn(auto, tovmin(52), tovmin(28));
    line-height: tovmin(52);
    padding: 0 tovmin(20);
    min-width: 1.18rem;
    height: auto;
    color: #fff;
    font-size: .24rem

  }
}

.press-schedule-team {

  // 未分配状态
  &--preview {
    .press-schedule-team-avatar-wrap {
      background: $color-gray-7;
    }

    .press-schedule-team-name {
      background: $color-gray-7;
      width: tovmin(168);
      height: tovmin(32);

      // 轮空
      &--empty {
        background: none;
        color: $color-gray;
      }
    }
  }

  // 弃权状态
  &--abstain {
    .press-schedule-team-avatar-wrap {
      position: relative;
      background: rgba($color: #09134e, $alpha: .4);

      .press-schedule-team-avatar {
        opacity: .4;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: tovmin(4);
        width: tovmin(40);
        height: tovmin(40);
        background: url(https://image-1251917893.file.myqcloud.com/Esports/new/admin/icon-abstain.png) no-repeat;
        background-size: 100%;
        z-index: 2;
      }
    }

    .press-schedule-team-name {
      color: $color-gray;
      text-align: center;
    }
  }

  &-avatar-wrap {
    position: relative;
    width: tovmin(84);
    height: tovmin(84);
    border-radius: 50%;
    border: tovmin(2) solid $color-gray-7;
    margin: tovmin(1) auto 0;
    background: $color-black;
    box-sizing: border-box;

    .press-schedule-team-tag-winner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: tovmin(-12);
      z-index: 2;
      margin: auto;
      width: tovmin(56);
      height: tovmin(32);
      line-height: tovmin(32);
      text-align: center;
      font-size: tovmin(22);
      color: $color-white;
      background: #5300c3;
      border-radius: tovmin(8) 0 tovmin(8) 0;
      z-index: 2;
    }

    .press-schedule-team-tag-mine {
      position: absolute;
      top: tovmin(-2);
      left: tovmin(-12);
      width: tovmin(28);
      height: tovmin(28);
      // border-radius: tovmin(8);
      font-size: tovmin(16);
      color: $color-white;
      background: #5300c3;
      text-align: center;
      line-height: tovmin(28);
      z-index: 2;
      clip-path: polygon(0% 0%,100% 0%,90% 100%,0% 100%);
    }

    .press-schedule-team-avatar {
      width: tovmin(80);
      height: tovmin(80);
      z-index: 1;
      object-fit: cover;
    }
  }

  &-name {
    font-size: tovmin(28);
    color: $color-black;
    margin-top: tovmin(16);
    width: tovmin(200);
    text-align: center;
    @include single-line-ellipsis;
  }
}


.press-schedule-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: tovmin(180);

  &--finals {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: tovmin(-10);
      left: 0;
      right: 0;
      margin: auto;
      width: tovmin(144);
      height: tovmin(144);
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.press-schedule-state {
  position: relative;
  z-index: 2;
  font-size: tovmin(20);
  color: #212124;
  display: flex;
  align-items: center;
  white-space: nowrap;

  &-icon {
    color: #5300c3;
    margin-left: tovmin(6);
    display: flex;
    align-items: center;
    line-height: tovmin(36);

    .icon-live {
      font-size: tovmin(28);
      color: #5300c3;
      margin-left: tovmin(8);
    }
  }
}

.press-schedule-score {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: tovmin(20) 0 tovmin(12);

  &-num,
  &-vs {
    font-size: tovmin(48);
    color: $color-black;
    font-family: 'PEACE';
  }

  &-colon {
    width: tovmin(12);
    height: tovmin(34);
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/admin/icon-colon.png) no-repeat center;
    background-size: contain;
    margin: 0 tovmin(22);
    transform: translateY(tovmin(-8));

    &--shift {
      position: relative;
      top: tovmin(10);
    }
  }
}

.press-schedule-bottom {
  font-size: tovmin(20);
  color: #212124;
  text-align: center;
  margin: 0 auto;
  padding: tovmin(6) tovmin(16);
}


// reset
.press-schedule-team--preview {
  .press-schedule-team-avatar-wrap,
  .press-schedule-team-name {
    background: #e4e8f2;
  }
}

.press-schedule-score-colon {
  transform: translateY(0);
}

.press-schedule-team-avatar-wrap {
  width: tovmin(80);
  height: tovmin(80);
  border-radius: 0;
}

.press-schedule-center--finals {
  .press-schedule-state {
    color: rgb(33,33,36,.5)
  }
}