/* The busy state of a submission.
 *
 * Hung off `aria-busy` rather than a class so the same rule covers a submit button and a status line,
 * and so assistive technology is told the same thing the spinner says. No element in this app used
 * the attribute for anything else.
 */
[aria-busy="true"] { cursor: progress; }
[aria-busy="true"]::before {
  content: '';
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-right: .5em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ielts-submit-spin .7s linear infinite;
}
@keyframes ielts-submit-spin { to { transform: rotate(1turn); } }
/* Still moving, so it never looks stalled, but slowly enough not to provoke anyone. */
@media (prefers-reduced-motion: reduce) {
  [aria-busy="true"]::before { animation-duration: 2.4s; }
}
/* A disabled button is normally dimmed to say "not for you". While submitting it is disabled for a
 * different reason, so keep it legible. */
button[aria-busy="true"]:disabled { opacity: 1; }