/* static/css/components/loading-button.css
   Pending state for buttons and links that leave the page (or wait on a
   request before moving on). Opt in with data-loading on the element; the
   script in js/components/loading-button.js adds .is-loading on click.

   The clicked control keeps its label and colour and swaps its arrow for a
   spinner, so the visitor sees *their* button working. Every other
   [data-loading] control on the page fades and stops taking clicks, which
   also stops a second tap from firing a second navigation or a second
   gender write. */

.is-loading {
  cursor: progress !important;
  pointer-events: none;
  transform: none !important;
}

/* The arrow is the "go" affordance; the spinner replaces it in the same
   slot so the button does not change width. */
.is-loading .ar,
.is-loading .fa-arrow-right {
  display: none !important;
}

.btn-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: btn-spin .7s linear infinite;
}

/* Inline (non-flex) controls such as the "prefer not to say" link. */
.gg-skip .btn-spinner {
  margin-left: 8px;
}

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

/* Everything else waits while one control is working. */
body.is-navigating [data-loading]:not(.is-loading) {
  pointer-events: none;
  opacity: .55;
  transition: opacity .15s ease;
}

/* Picture tiles on the gender page: spinner sits over the image rather
   than pushing the label down. */
.gg-tile.is-loading {
  position: relative;
  border-color: var(--g, #274285);
}
.gg-tile.is-loading img {
  opacity: .45;
  transition: opacity .15s ease;
}
.gg-tile .btn-spinner {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-width: 3px;
  color: var(--g, #274285);
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}