SpinnerSequence

.pds-spinner-sequence {
	--sequence-fade: var(--pds-animation-duration-reveal);

	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-l);
	text-align: center;
}

/* One box the size of the spinner. The spinner and the illustration sit on
   top of each other and cross-fade, so nothing moves when the end shows. */
.pds-spinner-sequence__stage {
	height: var(--sequence-size);
	position: relative;
	width: var(--sequence-size);
}

.pds-spinner-sequence__spinner,
.pds-spinner-sequence__illustration {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	transition:
		opacity var(--sequence-fade) ease,
		visibility var(--sequence-fade) ease;
}

.pds-spinner-sequence__illustration {
	color: var(--pds-color-foreground-default);
	opacity: 0;
	visibility: hidden;
}

/* Any illustration is drawn in the same box as the spinner. */
.pds-spinner-sequence__illustration > svg,
.pds-spinner-sequence__illustration > .pds-illustration {
	height: 100%;
	width: auto;
}

.pds-spinner-sequence--complete .pds-spinner-sequence__spinner {
	opacity: 0;
	visibility: hidden;
}

.pds-spinner-sequence--complete .pds-spinner-sequence__illustration {
	opacity: 1;
	visibility: visible;
}

.pds-spinner-sequence__label {
	animation: sequence-text-in var(--sequence-fade) ease;
	color: var(--pds-color-foreground-default);
	margin: 0;
}

@keyframes sequence-text-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pds-spinner-sequence__spinner,
	.pds-spinner-sequence__illustration {
		transition: none;
	}

	.pds-spinner-sequence__label {
		animation: none;
	}
}