/* A button whose request is under way (assets/js/busy-buttons.js): a
   spinner before its label, and its own colours faded -- a pale tint of a
   coloured button, a muted label and border on a light one (--zb-*, set
   from the button's colours) -- until the answer comes. */

.zurgle-is-busy.zurgle-is-busy {
    border-color: var(--zb-border) !important;
    background: var(--zb-bg) !important;
    box-shadow: none !important;
    color: var(--zb-fg) !important;
    cursor: progress !important;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

/* Their icons and text follow the faded colour. */
.zurgle-is-busy.zurgle-is-busy * {
    color: inherit !important;
}

.zurgle-busy-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-inline-end: .5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: zurgle-busy-spin .7s linear infinite;
}

/* In a flex button with its own gap, the gap already spaces it. */
.zurgle-is-busy--gap > .zurgle-busy-spinner {
    margin-inline-end: 0;
}

.zurgle-busy-hidden {
    display: none !important;
}

/* An icon-only button: just the spinner, where the icon was. */
.zurgle-is-busy--icon > :not(.zurgle-busy-spinner) {
    visibility: hidden;
}

.zurgle-is-busy--icon > .zurgle-busy-spinner {
    position: absolute;
    margin: 0;
}

/* An <input> button: the spinner drawn before its value (its padding widened by the script). */
.zurgle-is-busy--input.zurgle-is-busy--input {
    background-image: var(--zb-spinner) !important;
    background-repeat: no-repeat !important;
    background-position: var(--zb-spinner-x, .75em) center !important;
    background-size: 1em 1em !important;
}

@keyframes zurgle-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zurgle-busy-spinner {
        animation-duration: 1.6s;
    }
}