/**
 * The waiting state shown while an admin authenticates on Mapsemble.
 *
 * Self-contained rather than borrowing core's .spinner, whose sprite sits at
 * a fixed size and needs `is-active` toggling that the script would have to
 * mirror.
 */

.mapsemble-connect-progress {
  margin: 0.75rem 0 0;
}

/* Empty until something is being waited on, and taking up no room until then. */
.mapsemble-connect-progress:empty {
  display: none;
}

.mapsemble-connect-progress.is-waiting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #50575e;
}

.mapsemble-connect-progress.is-done {
  color: #00a32a;
  font-weight: 600;
}

.mapsemble-connect-progress.is-stopped {
  color: #996800;
}

.mapsemble-connect-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid #dcdcde;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: mapsemble-connect-spin 0.8s linear infinite;
}

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

/*
 * Respect a stated preference for less motion: the spinner is decoration,
 * and the message beside it already says what is happening.
 */
@media (prefers-reduced-motion: reduce) {
  .mapsemble-connect-spinner {
    animation: none;
  }
}

/* The manual fields, folded away behind the connect flow. */
.mapsemble-manual-details {
  margin-top: 1.5rem;
}

.mapsemble-manual-details > summary,
.mapsemble-connect-details > summary {
  cursor: pointer;
  font-weight: 600;
}