/*
 * Submit-button pending state — see public/assets/js/form-pending.js.
 *
 * `.is-pending` lands on whichever element can host the spinner: the wrapping
 * .input-box.button for an <input type="submit">, or the <button> itself.
 */

.is-pending {
  position: relative;
}

.is-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: form-pending-spin 0.6s linear infinite;
  pointer-events: none;
}

@keyframes form-pending-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Keep the label clear of the spinner. */
.is-pending > input[type="submit"],
button.is-pending {
  padding-right: 38px;
  cursor: progress;
}

/*
 * The control is genuinely disabled once the request is away, so it reads as
 * inert rather than merely busy. Without this the browser's own disabled
 * styling would fight the button's background colour.
 */
.is-pending > input[type="submit"]:disabled,
button.is-pending:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

/* Carries the pending announcement once focus leaves the disabled control. */
.form-pending-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The register button centres a label and a navigator icon; the icon would sit
   alongside the spinner and read as two separate indicators. */
button.is-pending > i {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-pending::after {
    animation: none;
    border-color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.85);
  }
}