/*
 * The zone of the requirement card where the document is asked for: the button,
 * what the asking is doing, and the refusal where there is one.
 *
 * The zone takes a line of its own under the sentence naming the document and
 * its provider, at every width: that sentence says what is being asked for, and
 * a button sharing its line reads as part of it.
 *
 * The button takes the whole width and reads centred: it is the one thing to do
 * on this card, and there is nothing to set it against. The waiting that stands
 * in its place does the same, so that nothing shifts when one becomes the other.
 *
 * Once the document is there the line carries two things — the way to it at the
 * left edge, and what happened at the right — wrapping under one another where
 * the card is too narrow for both. A refusal takes a line of its own: it is the
 * whole of what the zone has left to say.
 *
 * Colours come from the DSFR's own tokens and never from a literal — the layout
 * sets `data-fr-scheme="system"`, so the dark theme is reachable.
 */
.demo-request {
  flex: 1 1 100%;
}

.demo-request__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.demo-request__button {
  flex: 1 1 100%;
}

.demo-request__button .fr-btn {
  width: 100%;
  justify-content: center;
}

/*
 * The box of the button it stands in, to the pixel: `.fr-btn` is `min-height:
 * 2.5rem` with `.5rem 1rem` of padding on a `1.5rem` line, and the waiting
 * repeats them so that nothing under it moves when one becomes the other.
 *
 * Copied rather than inherited because the DSFR gives a button its size through
 * the `fr-btn` class, which this is not: wearing it would take the ground and
 * the colour of a button along with the metrics.
 */
.demo-request__state--waiting {
  flex: 1 1 100%;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.5rem;
}

.demo-request__state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-mention-grey);
}

.demo-request__failure {
  flex: 1 1 100%;
}

.demo-request__check {
  color: var(--text-default-success);
}

.demo-request__failed {
  color: var(--text-default-error);
}

.demo-request__spinner {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 2px solid var(--border-default-grey);
  border-block-start-color: var(--border-active-blue-france);
  border-radius: 50%;
  animation: demo-request-spin 0.8s linear infinite;
}

@keyframes demo-request-spin {
  to { transform: rotate(1turn); }
}

/*
 * A pulse where a rotation is unwelcome: the element must keep saying that
 * something is under way, and only motion sickness is at issue here.
 */
@media (prefers-reduced-motion: reduce) {
  .demo-request__spinner {
    animation: demo-request-pulse 1.5s ease-in-out infinite;
  }

  @keyframes demo-request-pulse {
    50% { opacity: 0.3; }
  }
}