/**
 * @file widgets/throbber.css
 * Full-page loading throbber (Drupal.wwfThrobber, see throbber.js). Fixed overlay
 * above every layer (cart, messages, toolbar) that dims the page and centres a
 * spinner while an action is in flight. Reusable: any consumer (e.g. the cart
 * stepper) attaches the wwf_tw/throbber library as a dependency.
 */
.wwf-throbber {
  position: fixed;
  inset: 0;
  z-index: var(--wwf-z-throbber, 2000);
  /* Force a compositing layer so the overlay paints above GPU-promoted layers
     such as the checkout's position:sticky order summary, which otherwise shows
     through despite the throbber's higher z-index. */
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 45%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--wwf-motion-duration, 200ms) ease,
    visibility 0s linear var(--wwf-motion-duration, 200ms);
}
.wwf-throbber.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--wwf-motion-duration, 200ms) ease;
}
.wwf-throbber__spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid rgb(255 255 255 / 30%);
  border-top-color: var(--wwf-color-accent, #f89840);
  border-radius: 50%;
  animation: wwf-throbber-spin 0.8s linear infinite;
}
@keyframes wwf-throbber-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wwf-throbber__spinner { animation-duration: 2.4s; }
}