/* ==========================================================================
   GUARD SUBMIT — the "sending" state on a form's submit buttons
   ==========================================================================
   Small, and only for the server-rendered pages. The React application has its
   own button states in index.css; this is the same idea for the Blade forms,
   which have no build step, and it uses the same tokens so a disabled button
   looks like the button it was.

   The state is driven by one class, .guard-submit--sending, which the script
   puts on a submit button and takes off again. Nothing here depends on
   data-submitting, so a form that is guarded server-side and a form guarded by
   this file look the same while they are both in flight.

   All of it is cosmetic. With this file absent the buttons do not change
   appearance, the forms still submit, and nothing is lost. */

.guard-submit--sending {
  cursor: progress !important;
  opacity: 0.65;
  /* The hover lift on .btn-submit is a transform, and a button that has moved up
     by a pixel while it is supposedly busy reads as clickable. */
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
  user-select: none;
}

/* A button that is genuinely disabled, whether or not this file is loaded.
   The colour is left alone on purpose: each page paints its own button, and
   a blanket background here would repaint the login gradient, the support
   portal's blue and the consent banner's three different weights. */
.guard-submit--sending:disabled {
  filter: saturate(0.6);
}

/* The spinner, drawn in currentColor so it takes whatever the page's button is
   painted in. It goes on every sending button: a button whose text was swapped
   to "Gönderiliyor…" shows both, and a button whose markup the script would
   have had to destroy shows only this. */
.guard-submit--sending::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: guard-submit-spin 0.7s linear infinite;
}

@keyframes guard-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A spinner that keeps turning for someone who has asked their system not to
   animate anything is a spinner that never stops. Show the same state without
   the movement. */
@media (prefers-reduced-motion: reduce) {
  .guard-submit--sending::before {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.5;
  }
}

/* The form itself, for anything that wants to react to the whole form being in
   flight rather than to one button. Not used by the seven forms; here so a view
   that needs it does not have to invent a second mechanism. */
form[data-submitting='true'] {
  cursor: progress;
}