/* Button loading states for the checkout / upsell / receipt pages.
 *
 * Two gaps in the BareEarth stylesheets this funnel carries over:
 *
 * 1. The `[data-button="spinner"] { opacity: 0 }` default only existed in
 *    templates-upsells-up04.css, so on any page that did not load that file (the checkout)
 *    the spinner had nothing hiding it and span forever.
 * 2. Those rules gate the visible state on `.is-submitting`, which is the 0.3.x class.
 *    SDK 0.4.x toggles `.next-loading` on the acting button instead — upstream next-core.css
 *    says so outright: "SDK add-to-cart uses .next-loading (not .is-submitting)". Nothing in
 *    this funnel's CSS reacted to it, so the spinner never resolved.
 *
 * Rules mirror upstream next-core.css, mapped onto this funnel's [data-button="*"] markup
 * instead of upstream's [next-slot="*"], and keep the legacy .is-submitting selectors so
 * anything still driven by the old class keeps working.
 */

[data-button='spinner'] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  font-size: calc(2 * 1em);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  color: inherit;
  transition: opacity 0.2s ease;
}

[data-button='content'],
[data-button='icon'] {
  transition: opacity 0.2s ease;
}

/* SDK 0.4.x loading state */
.next-loading {
  cursor: not-allowed;
}

/* Scoped to the acting control on purpose. The SDK also puts .next-loading on order-aware
 * wrappers, and its order enhancer never clears the class when a page resolves to "no order"
 * (isLoading false, error null, order null hits no branch) — a bare descendant selector would
 * then reveal the spinner permanently on unrelated buttons. */
[data-next-upsell-action].next-loading [data-button='spinner'],
[data-next-action].next-loading [data-button='spinner'],
a.next-loading [data-button='spinner'],
button.next-loading [data-button='spinner'] {
  opacity: 1;
}

[data-next-upsell-action].next-loading [data-button='content'],
[data-next-action].next-loading [data-button='content'],
a.next-loading [data-button='content'],
button.next-loading [data-button='content'],
[data-next-upsell-action].next-loading [data-button='icon'],
[data-next-action].next-loading [data-button='icon'],
a.next-loading [data-button='icon'],
button.next-loading [data-button='icon'] {
  opacity: 0;
  pointer-events: none;
}

/* Legacy 0.3.x class, kept for anything still toggling it */
.is-submitting [data-button='spinner'] {
  opacity: 1;
}

.is-submitting [data-button='content'],
.is-submitting [data-button='icon'] {
  opacity: 0;
  pointer-events: none;
}