.throbber {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex: none;
  color: inherit;
  animation: throbber-fade-in 120ms linear both;
}

.throbber svg {
  display: block;
  width: 100%;
  height: 100%;
}

.throbber-arrows {
  transform-origin: 50% 50%;
  animation: throbber-spin 1.8s linear infinite;
}

.throbber-hourglass {
  display: none;
}

@keyframes throbber-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

@keyframes throbber-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.throbber-sm { width: 16px; height: 16px; }
.throbber-md { width: 24px; height: 24px; }
.throbber-lg { width: 48px; height: 48px; }

.throbber-dim { opacity: 0.55; }

.throbber-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 6em;
  padding: 1.5em 0;
}

.throbber-block .throbber {
  width: 32px;
  height: 32px;
  vertical-align: 0;
}

.throbber-label {
  font-size: 0.9em;
  opacity: 0.7;
}

/* ---- reduced motion ---- */

/* Mozilla's own approach: hide the spinner and show a static hourglass
   rather than freezing a rotation mid-way. */
@media (prefers-reduced-motion: reduce) {
  .throbber { animation: none; }
  .throbber-arrows { display: none; }
  .throbber-hourglass { display: inline; }
}