/*--------------------------------------------------------------
# A button that is busy (button-busy.js)
#
# While its form posts or its link loads the next page, the button keeps its exact size and the
# site's own small circle spinner shows in it, in the same colour: the same circle, size and speed
# as components.css's .btn.is-busy (the 1804 export buttons, the export documents window), which
# this reaches the buttons that one can't: a modal's .mm-btn links, an <input type="submit">, a
# form submitted from script.
#
# Two looks:
#   - a button with an icon (<i>): the icon turns into the spinner, the label stays;
#   - a button without one: the label goes and the spinner takes the middle of the button.
--------------------------------------------------------------*/
.btn-busy {
    cursor: progress;
}

/* modal-modern.css dims a button with aria-busy to 70% (a quick view's fetch buttons); a busy
   button here is crisp, its spinner included. */
.btn-busy[aria-busy] {
    opacity: 1;
}

/* ---- the icon turns into the spinner ---- */
/* The glyph is hidden, not removed (visibility keeps its width, so nothing moves), and the circle
   is drawn over its box, as large as the icon is: 1em of the icon's own font size. */
.btn-busy-icon {
    position: relative;
    display: inline-block;
}

    .btn-busy-icon::before {
        visibility: hidden;
    }

    .btn-busy-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1em;
        height: 1em;
        margin: -.5em 0 0 -.5em;
        border: .15em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
    }

/* ---- no icon: the label goes, the spinner takes the middle ---- */
.btn-busy.is-centered {
    color: transparent !important;
    text-shadow: none !important;
    /* Bootstrap fades the colour over .15s: the label would linger under the spinner. */
    transition: none !important;
}

    /* The label's spans; its bare text is hidden by the colour above. */
    .btn-busy.is-centered > :not(.btn-busy-mark) {
        visibility: hidden;
    }

.btn-busy-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    /* An <input type="submit"> can't hold a child: the spinner is laid over it from outside, its
       box set by the script. */
    .btn-busy-mark.is-overlay {
        inset: auto;
    }

.btn-busy-mark .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .15rem;
    animation-duration: .75s;
}

/* Reduced motion: Bootstrap's own rule for its spinners, slower, not still. */
@media (prefers-reduced-motion: reduce) {
    .btn-busy-icon::after,
    .btn-busy-mark .spinner-border {
        animation-duration: 1.5s;
    }
}