/* =============================================================
   lg-button-loader.css  (2026-07-10)

   Spinner + disabled visuals for the class .lg-btn-loading that
   lg-button-loader.js flips on a clicked submit-style button.
   ============================================================= */

.lg-btn-loading {
    pointer-events: none;
    cursor: wait !important;
    opacity: 0.85;
    position: relative;
}

/* Spinner glyph the JS prepends to <button>/<a>. For <input>
   we can't inject markup, so the CSS below adds a background
   spinner on the right side of the button instead. */
.lg-btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-btn-spin 0.75s linear infinite;
}

/* On light-background buttons the white spinner disappears, so
   auto-switch to a darker ring for outline/default buttons. */
.btn-default.lg-btn-loading .lg-btn-spinner,
.btn-outline-secondary.lg-btn-loading .lg-btn-spinner {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: #5C8A1F;
}

/* Native input[type=submit] can't contain markup; paint a
   spinner background on its right edge instead. */
input.lg-btn-loading {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>\
<circle cx='8' cy='8' r='6' stroke='rgba(255,255,255,.35)' stroke-width='2' fill='none'/>\
<path d='M8 2 A6 6 0 0 1 14 8' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'>\
<animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.75s' repeatCount='indefinite'/>\
</path></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 32px !important;
}

/* Same spinner in a dark-friendly variant for outline-style
   input submits. Detected via .btn-default. */
input.btn-default.lg-btn-loading,
input.btn-outline-secondary.lg-btn-loading {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>\
<circle cx='8' cy='8' r='6' stroke='rgba(0,0,0,.15)' stroke-width='2' fill='none'/>\
<path d='M8 2 A6 6 0 0 1 14 8' stroke='%235C8A1F' stroke-width='2' fill='none' stroke-linecap='round'>\
<animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.75s' repeatCount='indefinite'/>\
</path></svg>") !important;
}

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