button[data-submit-feedback-active] {
  position: relative;
  color: transparent !important;
  cursor: wait;
}

button[data-submit-feedback-active] > * {
  visibility: hidden;
}

button[data-submit-feedback-active]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, var(--form-submit-spinner-color, currentColor) 28%, transparent);
  border-top-color: var(--form-submit-spinner-color, currentColor);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  animation: form-submit-feedback-spin 0.75s linear infinite;
}

input[data-submit-feedback-active] {
  cursor: wait;
}

form[data-submit-feedback-active] [type="submit"]:disabled,
form[data-submit-feedback-active] button:not([type]):disabled {
  cursor: wait;
}

.form-submit-feedback-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  button[data-submit-feedback-active]::after {
    animation: none;
  }
}

@keyframes form-submit-feedback-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}