form[aria-busy="true"] button[type="submit"].is-submitting,
form[aria-busy="true"] input[type="submit"].is-submitting {
    cursor: wait;
    opacity: .78;
    pointer-events: none;
}

button.is-submitting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65em;
}

/*
 * Keep the temporary loading content on the button's original typography.
 * Some page-specific button styles target every nested span and would
 * otherwise enlarge both the label and spinner during submission.
 */
form[aria-busy="true"] button.is-submitting > .submit-guard-label {
    position: static !important;
    z-index: auto !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

form[aria-busy="true"] button.is-submitting > .submit-guard-spinner {
    position: static !important;
    z-index: auto !important;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    font-size: inherit !important;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: submit-guard-spin .7s linear infinite;
}

@keyframes submit-guard-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .submit-guard-spinner { animation: none; }
}