/* Admin page-transition feedback (navigation-progress.js). */

#talkesim-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10000;
  height: 2px;
  width: 0;
  background: var(--color-primary-600);
  box-shadow: 0 0 6px var(--color-primary-500);
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.3s ease-out,
    opacity 0.2s ease-out;
}

/* Completion on the page the navigation landed on (finish() sets width/opacity). */
#talkesim-progress.is-finishing {
  transition:
    width 0.25s ease-out,
    opacity 0.3s ease-out;
}

#talkesim-progress.is-active {
  opacity: 1;
  animation: talkesim-progress-trickle 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}

@keyframes talkesim-progress-trickle {
  from {
    width: 0;
  }
  10% {
    width: 35%;
  }
  to {
    width: 90%;
  }
}

/* A submitted form's button: locked, with a spinner before its label. */
.talkesim-busy {
  cursor: wait !important;
  opacity: 0.75;
}

button.talkesim-busy::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-inline-end: 0.4em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 9999px;
  animation: talkesim-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  #talkesim-progress.is-active {
    animation: none;
    width: 90%;
  }

  button.talkesim-busy::before {
    animation-duration: 2s;
  }
}