/**
 * The loading state for SpeedyGo admin buttons.
 *
 * The label is hidden and a spinner centred in its place, rather than the label being replaced
 * with different text. Rewriting it would need a translated string per button and would still be
 * wrong for whichever button was added last; hiding it needs neither and cannot go stale.
 *
 * The button keeps its width - pinned in JavaScript before this class is added - so a row of
 * buttons does not shift when one of them starts working.
 */

.sg-is-loading {
    position: relative;
    cursor: progress !important;
    /* Hides the label without collapsing the box, so the spinner has somewhere to sit. */
    color: transparent !important;
    text-shadow: none !important;
}

.sg-is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    /* Set per button from its rendered background - see spinnerColours() in the script. The
       fallbacks here only apply if the script has not run, and match a light button. */
    border: 2px solid var(--sg-spin-track, rgba(125, 107, 250, 0.25));
    border-top-color: var(--sg-spin-head, #7D6BFA);
    animation: sg-btn-spin 0.7s linear infinite;
}

@keyframes sg-btn-spin {
    to { transform: rotate(360deg); }
}

/* Respect a stated preference for less movement: the button still reads as busy without it. */
@media (prefers-reduced-motion: reduce) {
    .sg-is-loading::after {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.6;
    }
}