/* Payment: the bits around the pay button — the card brands accepted and
   the error a provider sends back (the paypal controller sets the message
   and toggles is-hidden). */
.payment-error {
  background: oklch(from var(--color-red) l c h / 0.12);
  border-radius: var(--radius-m);
  color: var(--color-red);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  padding: var(--space-xs) var(--space-s);

  &.is-hidden {
    display: none;
  }
}

/* Monochrome brand marks from simpleicons.org, inverted on dark pages */
.payment-icon {
  block-size: var(--space-l);
  inline-size: auto;
}

[data-scheme="dark"] .payment-icon {
  filter: invert(1);
}

/* PayPal draws its own button, which cannot be disabled: until the form is
   complete (checkout-form) it fades and lets the pointer through */
.payment-paypal.is-inactive {
  opacity: 0.45;
  pointer-events: none;
}

/* PayPal's iframe without the browser's border, rounded like its button */
.payment-paypal iframe {
  border: 0;
  border-radius: var(--radius-pill);
}