@use '../style/base' as *;

@include bem(miniapp-pay) {
  @include b() {
    @include universal;
    height: 100%;
    background: #f6f6f6;
  }

  @include e(order) {
    @include universal;
    height: 100%;
    @include e(header) {
      display: flex;
      align-items: center;
      font-size: var(--gms-miniapp-pay-header-font-size);
      justify-content: space-between;
      @include e(pay-back-image) {
        width: 50rpx;
        height: 50rpx;
        margin-left: 10rpx;
      }
      @include e(header-right) {
        width: 50rpx;
        height: 50rpx;
      }
    }

    @include e(product) {
      @include universal;
      background-color: #fff;
      align-items: center;
      padding: 72rpx 20rpx;
      font-size: 30rpx;
      line-height: 30rpx;
      @include e(product-divider) {
        height: 1px;
        background-color: var(--gms-miniapp-pay-header-bottom-border-color);
        width: 100%;
        position: relative;
        top: 72rpx;
      }
      @include e(product-tag-line) {
        margin-top: 20rpx;
        @include e(product-tag) {
          font-size: 28rpx;
          line-height: 30rpx;
          border: 1px solid #e4e0ce;
          color: #d6bb88;
          padding: 0rpx 12rpx;
          margin-left: 12rpx;
        }
      }
      @include e(product-desc) {
        margin-top: 20rpx;
        color: #999999;
      }
      @include e(product-price) {
        line-height: 68rpx;
        margin-top: 52rpx;
        @include e(product-price-number) {
          font-size: 68rpx;
          font-weight: 600;
        }
      }
      @include e(product-reference) {
        margin-top: 20rpx;
        color: #c3c3c3;
      }
    }
    @include e(count-down) {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx;
      background-color: #fff;
      color: #777777;
      @include e(count-down-container) {
        display: inline-flex;
        @include e(count-down-box) {
          background-color: #feaf49;
          padding: 0rpx 6rpx;
        }
        @include e(count-down-colon) {
          width: 30rpx;
          text-align: center;
        }
      }
    }
    @include e(pay-method-select) {
      margin-top: 16rpx;
      background-color: #fff;
      font-size: 32rpx;
      line-height: 45rpx;
      padding: 26rpx;
    }
    @include e(pay-method-line) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      margin-top: 16rpx;
      background-color: #fff;
      padding: 0 26rpx;
      @include e(pay-method-wx) {
        font-size: 32rpx;
        line-height: 100rpx;
        @include e(pay-method-wx-icon) {
          width: 50rpx;
          height: 50rpx;
          position: relative;
          top: 10rpx;
          margin-right: 20rpx;
        }
      }
      @include e(pay-method-check-image) {
        height: 40rpx;
        width: 40rpx;
      }
    }
    @include e(to-pay-button) {
      background-color: #309fea;
    }
  }
  @include e(result) {
    @include universal;
    height: 100%;

    @include e(top-card) {
      padding-bottom: 40rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      @include e(top-card-title) {
        font-size: 34rpx;
        text-align: center;
        color: #222222;
        padding-top: 20rpx;
        padding-bottom: 70rpx;
        display: flex;
        justify-content: space-between;
        @include e(pay-back-image) {
          width: 50rpx;
          height: 50rpx;
          margin-left: 10rpx;
        }
        @include e(top-card-right) {
          width: 50rpx;
          height: 50rpx;
        }
      }
      @include e(pay-finish-image-line) {
        display: flex;
        justify-content: center;
        padding-bottom: 20rpx;
        @include e(pay-finish-image) {
          width: 100rpx;
          height: 100rpx;
        }
      }
      @include e(success-title) {
        color: #333333;
        font-size: 36rpx;
        text-align: center;
      }
      @include e(product) {
        @include universal;
        align-items: center;
        font-size: 30rpx;
        @include e(product-price) {
          line-height: 68rpx;
          @include e(product-price-number) {
            font-size: 32rpx;
            font-weight: 600;
          }
        }
      }
      @include e(finish-button-line) {
        margin: 32rpx auto 0;
        display: flex;
        justify-content: center;
        @include e(finish-button) {
          padding: 10rpx 34rpx;
          font-size: 34rpx;
          color: #309fea;
          border: 1px solid #309fea;
          border-radius: 30rpx;
        }
      }
    }

    @include e(product-info-card) {
      background-color: #fff;
      font-size: 28rpx;
      line-height: 28rpx;
      padding: 30rpx;
      padding-bottom: 0rpx;
      @include e(info-title) {
        display: flex;
        justify-content: space-between;
        color: #555555;
      }
      @include e(info-detail) {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        @include e(info-detail-left) {
          display: flex;
          justify-content: left;
          @include e(info-detail-image) {
            width: 130rpx;
            height: 130rpx;
          }
          @include e(info-detail-text) {
            margin-left: 20rpx;
            @include e(info-detail-name) {
              font-size: 32rpx;
              color: #222222;
            }
            @include e(info-detail-desc) {
              margin-top: 20rpx;
              color: #999999;
            }
            @include e(info-detail-tag) {
              margin-top: 20rpx;
              @include e(product-tag) {
                font-size: 28rpx;
                line-height: 30rpx;
                border: 1px solid #e4e0ce;
                color: #d6bb88;
                padding: 0rpx 12rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
        @include e(info-detail-right) {
          @include e(info-detail-amount) {
            color: #222222;
            font-size: 32rpx;
            text-align: right;
          }
          @include e(info-detail-count) {
            color: #999999;
            text-align: right;
            margin-top: 20rpx;
          }
        }
      }
      @include e(info-amount) {
        border-top: 1px solid #999999;
        padding-top: 40rpx;
        margin-top: 40rpx;
        @include e(info-amount-line) {
          display: flex;
          justify-content: space-between;
          margin-bottom: 40rpx;
          @include e(info-amount-right) {
            color: #eb333b;
          }
        }
      }
    }

    @include e(order-info-card) {
      margin-top: 20rpx;
      background-color: #fff;
      font-size: 28rpx;
      line-height: 70rpx;
      padding: 30rpx;
      @include e(order-info-line) {
        height: 70rpx;
        display: flex;
        justify-content: space-between;
        @include e(order-info-label) {
          color: #999999;
        }
        @include e(order-info-value) {
          color: #555555;
          @include e(info-copy) {
            margin-left: 10rpx;
            color: #1885f2;
          }
        }
      }
    }
  }
}