/*
 * app-submit-lock.css -- the busy state for static/js/app-submit-lock.js.
 *
 * Its own file rather than a section of helper.css because 8 templates that
 * render the sidebar never load helper.css (asset_form, incident_form,
 * change_request_form, ...) and the auth pages load only login.css. The script
 * is global, so its styles have to be too -- otherwise a locked button on those
 * screens is disabled but looks completely normal, which is the confusion this
 * was meant to remove.
 *
 * Loaded from template/components/sidebar.html and the three standalone auth
 * templates. Asserted by tests/test_global_frontend_assets.py.
 */

/*
 * Buttons in this app are styled by a dozen unrelated rules (.btn-danger,
 * .save-btn, .duplicate-btn-primary, inline styles). So the busy state sets no
 * background of its own: it dims and desaturates whatever the button already
 * looks like, which works against every one of them.
 *
 * !important is load-bearing here -- several of those rules set opacity, cursor
 * and transform at equal-or-higher specificity, including on :hover.
 */
button.app-btn-busy,
button.app-btn-busy:hover,
input.app-btn-busy,
input.app-btn-busy:hover {
  opacity: 0.6 !important;
  filter: grayscale(0.7);
  cursor: progress !important;
  /* Belt and braces: the element is also disabled, but pointer-events keeps
     hover/active styling from firing and looking clickable. */
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.app-btn-spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  /* currentColor so the ring matches the button's own text colour, whatever
     palette the screen uses. */
  border: 2px solid currentColor;
  /* The transparent edge is what makes the ring read as spinning. */
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-btn-spin 0.6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  /* Still moving -- it is a progress signal -- but slow enough not to trigger
     motion sensitivity. */
  .app-btn-spinner {
    animation-duration: 2s;
  }
}