/*
 * =====================================
 * ZUREZU STANDARD BUTTON LOADING STATE
 * =====================================
 *
 * All async action buttons should behave
 * consistently:
 *
 * normal
 *   ↓
 * grey + spinner + loading text
 *   ↓
 * normal / next screen
 *
 * Existing spinner implementations remain
 * responsible for drawing their spinner.
 * This file standardizes the BUTTON itself.
 */


/*
 * -------------------------------------
 * ACTIVE ASYNC BUTTON
 * -------------------------------------
 */

button.is-working,
button.is-saving,
button.is-loading,
button[aria-busy="true"] {

    background:
        #a8a7a4 !important;

    border-color:
        #a8a7a4 !important;

    color:
        #ffffff !important;

    opacity:
        1 !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    cursor:
        wait !important;

    pointer-events:
        none !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}


/*
 * A disabled loading button must remain
 * solid grey instead of inheriting a page's
 * normal faded disabled appearance.
 */

button.is-working:disabled,
button.is-saving:disabled,
button.is-loading:disabled,
button[aria-busy="true"]:disabled {

    background:
        #a8a7a4 !important;

    border-color:
        #a8a7a4 !important;

    color:
        #ffffff !important;

    opacity:
        1 !important;
}


/*
 * -------------------------------------
 * HOVER OVERRIDE
 * -------------------------------------
 *
 * Prevent hover styles from making the
 * button dark/green/etc while it is busy.
 */

button.is-working:hover,
button.is-saving:hover,
button.is-loading:hover,
button[aria-busy="true"]:hover {

    background:
        #a8a7a4 !important;

    border-color:
        #a8a7a4 !important;

    color:
        #ffffff !important;

    transform:
        none !important;

    box-shadow:
        none !important;
}


/*
 * -------------------------------------
 * SPINNER COLOR SUPPORT
 * -------------------------------------
 *
 * Existing pseudo-element spinners that use
 * currentColor automatically become white.
 */

button.is-working::before,
button.is-saving::before {

    color:
        #ffffff;
}


/*
 * Existing child-based spinners such as
 * .button-spinner remain clearly visible.
 */

button.is-loading
.button-spinner,
button[aria-busy="true"]
.button-spinner {

    border-color:
        rgba(
            255,
            255,
            255,
            .42
        ) !important;

    border-top-color:
        #ffffff !important;
}


@media (
    prefers-reduced-motion:
        reduce
) {

    button.is-working,
    button.is-saving,
    button.is-loading,
    button[aria-busy="true"] {

        transition:
            none !important;
    }
}