/* Progress state for the button that submitted a form (set by js/submit-guard.js).
   Same spinner as the existing .loading state on the Logout / Authorize / device-trust buttons. */
.is-submitting {
    pointer-events: none;
    opacity: 0.75;
}

.is-submitting::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-inline-start: 8px;
    vertical-align: middle;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: submit-guard-spin 0.8s linear infinite;
}

/* Image-only buttons (external sign-in providers) and clickable cards (2FA method cards): the content fills
   the element, so the spinner is laid over it at the end edge instead of taking space it cannot give up. */
.is-submitting:has(> img),
.is-submitting:not(button):not(input) {
    position: relative;
}

.is-submitting:has(> img)::after,
.is-submitting:not(button):not(input)::after {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    margin: -7px 0 0 0;
}

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

@media (prefers-reduced-motion: reduce) {
    .is-submitting::after {
        animation-duration: 2.4s;
    }
}