/*
 * desc: 参赛必读弹窗组件样式
 * date: 2025-08-15
 * author: lauheeliu
 * email: lauheeliu@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix} {
  background-color: $mrp-bg-color;
  border-radius: $mrp-border-radius;
  overflow: hidden;
  max-height: 80vh;
  @include flex(column);
  padding: $mrp-content-padding;

  &__head {
    height: $mrp-head-height;
    @include flex(row, center, center);
    position: relative;
    border-bottom: 1px solid $mrp-head-border-color;

    &-title {
      font-size: $mrp-head-title-font-size;
      font-weight: $mrp-head-title-font-weight;
      color: $mrp-head-title-color;
    }
  }

  &__body {
    flex: 1;
    overflow: hidden;
    @include flex(column);
  }

  &__tabs {
    @include flex(row);
    justify-content: flex-start;
  }

  &__tab {
    width: $mrp-tab-width;
    height: $mrp-tab-height;
    margin: 0;
    text-align: center;
    font-size: $mrp-tab-font-size;
    line-height: $mrp-tab-line-height;
    color: $mrp-tab-color;
    background: $mrp-tab-bg-color url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/tab-fill.png) left top repeat;
    background-size: 1.8rem .6rem;
    border: $mrp-tab-border-width solid $mrp-tab-border-color;
    flex: 1;

    &:first-child {
      border-radius: $mrp-tab-first-radius;
    }

    &:last-child {
      border-radius: $mrp-tab-last-radius;
    }

    &--active {
      color: $mrp-tab-active-color;
      background: $mrp-tab-active-bg-color;
      border: $mrp-tab-border-width solid $mrp-tab-active-border-color;
    }
  }

  &__content {
    height: $mrp-content-height;
    overflow-y: auto;
  }

  &__main {
    padding: 0;
    background: none;
  }

  &__title {
    @include flex(row);
    justify-content: flex-start;
    padding: $mrp-title-padding;
    font-size: $mrp-title-font-size;
    line-height: $mrp-title-line-height;
    color: $mrp-title-color;

    &--num {
      font-weight: 400;
      background: $mrp-title-num-gradient;
      -webkit-background-clip: text;
      color: transparent;
      font-size: $mrp-title-num-font-size;
      width: auto;
      letter-spacing: -.02rem;
      height: .44rem;
      margin: $mrp-title-num-margin;
    }
  }

  // 规则表单相关样式
  &__rules-form {
    padding-top: $mrp-rules-form-padding;
  }

  &__rules-form-li {
    @include flex(row);
    justify-content: flex-start;
    margin-bottom: $mrp-rules-form-li-margin;

    &.no-flex {
      display: block;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__rule-form-label {
    display: inline-block;
    width: $mrp-rule-form-label-width;
    font-size: $mrp-rule-form-label-font-size;
    line-height: $mrp-rule-form-label-line-height;
    white-space: nowrap;
    color: $mrp-rule-form-label-color;
  }

  &__rule-value {
    @include flex(row);
    justify-content: flex-start;
    font-size: $mrp-rule-value-font-size;
    line-height: $mrp-rule-value-line-height;
    color: $mrp-rule-value-color;
    width: $mrp-rule-value-width;
    font-weight: 400;

    .ico-tip-24-location {
      margin: 0 .06rem 0 0;
      display: inline-block;
    }
  }

  &__rule-value-text {
    max-width: 4.2rem;
  }

  // 表格相关样式
  &__rule-form-table {
    width: 100%;
    margin-top: $mrp-rule-form-table-margin;
    border: 1px solid $mrp-rule-form-table-border-color;
    @include flex(column);
  }

  &__rule-form-thead {
    @include flex(row, center, center);
    width: 100%;
    height: .6rem;
    line-height: $mrp-rule-form-th-line-height;
    font-size: $mrp-rule-form-th-font-size;
    color: $mrp-rule-form-th-color;
    background: $mrp-rule-form-th-bg-gradient;
  }

  &__rule-form-tbody {
    width: 100%;
  }

  &__rule-form-tr {
    @include flex(row);
    width: 100%;
    border-bottom: 1px solid $mrp-rule-form-table-border-color;

    &:last-child {
      border-bottom: none;
    }
  }

  &__rule-form-th {
    flex: 1;
    font-size: $mrp-rule-form-th-font-size;
    text-align: left;
    font-weight: 200;
    padding: $mrp-rule-form-th-padding;
    color: $mrp-rule-form-th-color;
  }

  &__rule-form-td {
    position: relative;
    flex: 1;
    height: $mrp-rule-form-td-line-height;
    line-height: $mrp-rule-form-td-line-height;
    font-family: 'AgencyFB-Bold';
    color: $mrp-rule-form-td-color;
    font-size: $mrp-rule-form-td-font-size;
    padding: $mrp-rule-form-td-padding;
    @include flex(row, flex-start, center);
  }

  // 排名图标样式
  &__rule-form-tbody {

    .#{$prefix}__rule-form-tr:nth-child(1),
    .#{$prefix}__rule-form-tr:nth-child(2),
    .#{$prefix}__rule-form-tr:nth-child(3) {
      .#{$prefix}__rule-form-td:first-child {
        font-size: 0;
        padding: $mrp-rule-form-td-first-padding;

        &::after {
          content: '';
          position: absolute;
          left: .38rem;
          top: 0;
          bottom: 0;
          margin: auto;
          width: .4rem;
          height: .46rem;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    .#{$prefix}__rule-form-tr:nth-child(1) .#{$prefix}__rule-form-td:first-child::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--1.png);
    }

    .#{$prefix}__rule-form-tr:nth-child(2) .#{$prefix}__rule-form-td:first-child::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--2.png);
    }

    .#{$prefix}__rule-form-tr:nth-child(3) .#{$prefix}__rule-form-td:first-child::after {
      background-image: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/rule-table--3.png);
    }
  }

  // 进度相关样式
  &__rule-sche {
    display: inline-block;
    width: 4.5rem;
  }

  &__rule-sche-line {
    position: relative;
    @include flex(column);
    justify-content: flex-start;
  }

  &__rule-sche-item {
    position: relative;
    width: 100%;
    padding: $mrp-rule-sche-item-padding;

    &::after {
      content: '';
      display: block;
      width: .24rem;
      height: .24rem;
      background: url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/progress-circle.png') center center no-repeat;
      background-size: 100% auto;
      position: absolute;
      left: 0;
      top: .04rem;
    }

    &::before {
      content: '';
      display: block;
      height: 100%;
      width: .06rem;
      position: absolute;
      top: .06rem;
      left: .08rem;
      background: $mrp-rule-sche-line-color;
    }

    &:last-child::before {
      content: none;
    }
  }

  &__rule-step-name {
    font-size: $mrp-rule-step-name-font-size;
    line-height: $mrp-rule-step-name-line-height;
    color: $mrp-rule-step-name-color;
    text-align: left;
    margin-bottom: $mrp-rule-step-name-margin;
    font-weight: $mrp-rule-step-name-font-weight;
  }

  &__rule-step-content {
    height: auto;
    display: block;
    font-size: $mrp-rule-step-content-font-size;
    line-height: $mrp-rule-step-content-line-height;
    color: $mrp-rule-step-content-color;
    margin: $mrp-rule-step-content-margin;
    font-weight: $mrp-rule-step-content-font-weight;
  }

  // 提示框相关样式
  &__right-tips-box {
    position: relative;
  }

  &__game-start-tips {
    width: 3.6rem;
    height: .36rem;
    line-height: .36rem;
    margin-left: -1.8rem;
    overflow: visible;
    text-indent: 0;
    background: $mrp-game-start-tips-bg-color;
    border-radius: 0;
    transform: skewX(-15deg);
    font-size: $mrp-game-start-tips-font-size;
    top: -.48rem;
    left: 50%;
    position: absolute;
    text-align: center;

    &::before {
      content: '';
      position: absolute;
      display: block;
      transform: skewX(-6deg) rotate(37deg);
      bottom: -.05rem;
      left: 50%;
      margin-left: -.1rem;
      width: 0;
      height: 0;
      border-style: solid;
      background: $mrp-game-start-tips-bg-color;
      border-width: .1rem .08rem 0 .08rem;
      border-color: transparent transparent $mrp-game-start-tips-bg-color transparent;
    }
  }

  &__game-start-text {
    display: inline-block;
    transform: skewX(15deg);
    color: $mrp-game-start-text-color;
  }

  .ico-tip-help {
    width: .32rem;
    height: .32rem;
    margin: 0 .08rem;
    font-size: .24rem;
    font-family: 'iconfont';
    font-style: normal;
    display: inline-block;

    &::before {
      content: '\e028';
    }
  }

  // 引导内容相关样式
  &__guide-content {
    margin: $mrp-guide-content-margin;

    &--bg-1,
    &--bg-2 {
      background-size: cover;
      background-repeat: no-repeat;
      width: 6.9rem;
      height: 4.86rem;
      box-shadow: 0px 2px 2px rgba(196, 193, 205, .8);
    }

    &--bg-1 {
      background-image: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/guide-panel--1.png);
    }

    &--bg-2 {
      background-image: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/guide-panel--2.png);
    }
  }

  &__guide-text {
    padding: $mrp-guide-text-padding;

    &--service {
      padding: 0 .24rem;
    }
  }

  &__guide-wx-wrap {
    img,
    image {
      width: 4.72rem !important;
      display: block;
      margin: $mrp-guide-wx-img-margin;
    }
  }

  // 二维码相关样式
  &__qr-code {
    width: 2.46rem;
    height: 2.46rem;
    border: $mrp-qr-code-border;
    border-radius: $mrp-qr-code-radius;
    margin: $mrp-qr-code-margin;
    background: $mrp-qr-code-bg-color;
    object-fit: contain;
    @include flex(column, center, center);
  }

  &__qr-code-tips {
    margin-bottom: $mrp-qr-code-tips-margin;
    font-size: $mrp-qr-code-tips-font-size;
    line-height: $mrp-qr-code-tips-line-height;
    text-align: center;
    color: $mrp-qr-code-tips-color;
    font-weight: $mrp-qr-code-tips-font-weight;
  }

  // 引导提示相关样式
  &__guide-tips {
    font-size: $mrp-guide-tips-font-size;
    line-height: $mrp-guide-tips-line-height;
    display: block;
    color: $mrp-guide-tips-color;
    text-align: center;
    margin-top: $mrp-guide-tips-margin;

    &-wx {
      @include flex(row, center);
      margin: 0;
      font-size: $mrp-guide-tips-wx-font-size;
      font-weight: $mrp-guide-tips-wx-font-weight;
      text-align: left;
      white-space: nowrap;

      .dots {
        display: inline-block;
        width: .52rem;
        height: .52rem;
        background: rgba(217, 217, 217, .4) url('https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/dots.png') center center no-repeat;
        background-size: .32rem .06rem;
        margin: 0 .04rem;
      }
    }
  }

  &__guide-example-img {
    display: block;
    margin: $mrp-guide-example-img-margin;
    width: 100%;
  }

  // 引导标签相关样式
  &__guide-tabs {
    @include flex(row);
    justify-content: flex-start;
    width: 100%;
  }

  &__guide-tab {
    width: $mrp-guide-tab-width;
    height: $mrp-guide-tab-height;
    display: block;
    text-align: center;
    font-size: $mrp-guide-tab-font-size;
    line-height: $mrp-guide-tab-line-height;
    color: $mrp-guide-tab-color;

    &--active {
      color: $mrp-guide-tab-active-color;
      position: relative;
      line-height: $mrp-guide-tab-active-line-height;

      &::after {
        content: '';
        display: block;
        border-radius: $mrp-guide-tab-active-after-radius;
        background-image: $mrp-guide-tab-active-after-bg;
        width: $mrp-guide-tab-active-after-width;
        height: $mrp-guide-tab-active-after-height;
        position: absolute;
        margin-left: $mrp-guide-tab-active-after-margin;
        left: 50%;
        bottom: .08rem;
      }
    }
  }

  // 日历相关样式
  &__calendar {
    margin: $mrp-calendar-margin;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/calendar.png) center top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 3.1rem;
    height: 2.7rem;
  }

  &__calendar-date {
    display: block;
    font-size: $mrp-calendar-date-font-size;
    line-height: $mrp-calendar-date-line-height;
    text-align: center;
    text-indent: -.8em;
    color: $mrp-calendar-date-color;
  }

  &__calendar-time {
    display: block;
    font-size: $mrp-calendar-time-font-size;
    line-height: $mrp-calendar-time-line-height;
    text-align: center;
    text-indent: -.3rem;
    color: $mrp-calendar-time-color;
    font-family: 'AgencyFB-Bold';
  }

  // 按钮相关样式
  &__btn--common {
    height: $mrp-btn-common-height;
    line-height: $mrp-btn-common-line-height;
    width: $mrp-btn-common-width;
    display: block;
    font-size: $mrp-btn-common-font-size;
    text-align: center;
    font-family: 'PEACE';
    letter-spacing: $mrp-btn-common-letter-spacing;
  }

  &__btn--primary {
    color: $mrp-btn-primary-color;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/bg-btn.png) no-repeat;
    background-size: 100% 100%;
    margin: $mrp-btn-primary-margin;
  }

  &__btn-wrap {
    @include flex(row, center, space-between);
    padding: $mrp-btn-wrap-padding;

    .#{$prefix}__btn-inner:only-child {
      list-style: none;
      width: 4.4rem;
      padding: 0;
      margin: 0 auto;
    }
  }
}