.x-statement-card {
  @include custom-theme-color(primary, background-color);
  border-radius: $card-border-radius;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  padding: 1.5rem;
  position: relative;
  width: 100%;
  overflow: hidden;
  @extend %pb-0,
          %pl-0,
          %pr-0,
          %pt-0,
          %x-shadow;
    color: $white;
    sc-btn-icon {
      z-index: 99;
    }
}

.x-payment-status {
  @include custom-theme-color(primary, background-color);
  border-radius: $card-border-radius;
  display: flex;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem 1rem 1rem;
  color: $white;

  .x-payment-status_icon {
    padding-right: 1rem;
    .x-icon {
      margin-top: -0.35rem;
    }
  }

  .x-payment-status_message {
    flex: 1;
  }

  .x-payment-status_title {
    @extend %font-weight-bold;
    color: $white;
  }
  .x-payment-status_desc {
    color: $white;
    opacity: 0.7;
  }
}