$cssPrefix: h-payment-status;

.#{$cssPrefix} {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  &-pay {
    &-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
    &-prefix,
    &-suffix,
    &-buyer {
      font-family: PingFangSC-Regular;
      font-size: var(--p-body-1-font-size);

      letter-spacing: 0;
      text-align: center;
    }
    &-buyer {
      margin-left: 4rpx;
      margin-right: 4rpx;
      color: var(--color-brand-3);
    }
  }
  &-fee {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold;
    font-size: var(--p-display-2-font-size);
    color: var(--color-text1-4);

    padding: 20rpx 0;
  }
  &-time {
    &-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
    &-prefix,
    &-suffix,
    &-countdown {
      font-family: PingFangSC-Regular;
      font-size: var(--p-body-1-font-size);
      color: var(--color-text1-2);
      letter-spacing: 0;
      text-align: center;
    }

    &-prefix {
      margin-right: 13rpx;
    }
    &-countdown {
      color: var(--color-brand-3);
    }
  }
}