/*
 * Button loading state - a small spinner at the centred right edge of any
 * button while it is performing an action. Toggled by btn-loader.js
 * (add/remove .is-loading); works on <button>, <a> and <input> buttons
 * because the spinner is a background image, not a pseudo-element.
 */
:root {
    --btn-spinner-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    --btn-spinner-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23475467' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23475467' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}

.btn.is-loading,
button.is-loading,
input[type="submit"].is-loading,
input[type="button"].is-loading,
a.commonBtn.is-loading,
.commonBtn.is-loading {
    position: relative;
    pointer-events: none;
    cursor: progress;
    opacity: .92;
    padding-right: 2.75rem !important;
    background-image: var(--btn-spinner-light) !important;
    background-repeat: no-repeat !important;
    background-position: right .9rem center !important;
    background-size: 1.1rem 1.1rem !important;
}

/* buttons with a light / transparent background need a dark spinner */
.btn-light.is-loading,
.btn-white.is-loading,
.btn-default.is-loading,
.btn-link.is-loading,
[class*="btn-outline-"].is-loading,
[class*="btn-inverse-"].is-loading {
    background-image: var(--btn-spinner-dark) !important;
}

/* compact buttons (table actions, icon buttons) */
.btn-sm.is-loading,
.btn-xs.is-loading,
.btn-icon.is-loading,
.action-btn.is-loading {
    padding-right: 2.1rem !important;
    background-position: right .55rem center !important;
    background-size: .9rem .9rem !important;
}

/* full-width buttons keep the spinner inside the button, still centred vertically */
.btn-block.is-loading {
    background-position: right 1.1rem center !important;
}

@media (prefers-reduced-motion: reduce) {
    .is-loading { cursor: progress; }
}

/* thin progress bar shown while a write (POST/PUT/DELETE) request is in flight */
#app-ajax-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--theme-color, #22577A);
    z-index: 100001;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 8px var(--theme-color, #22577A);
}