/*
 * The step indicator. design/DESIGN-SYSTEM.md §4.16.
 *
 * A bar and a label per step, the current one lit. It lived inside
 * `modal.css` while the checkout was a modal; it is a component of its own now
 * because the checkout is a page and the modal is gone, and a component that
 * belongs to a deleted container is a rule with no consumer.
 *
 * The number of steps is not written down here: `.sp-step` is `flex: 1`, so
 * three of them and five of them both fill the row.
 */

.sp-steps {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	min-width: 0;
}

.sp-step__bar {
	height: 3px;
	background: var(--sp-line-14);
}

.sp-step.is-done .sp-step__bar,
.sp-step.is-active .sp-step__bar {
	background: var(--sp-red);
}

.sp-step__index {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-nano);
	line-height: 1;
	color: var(--sp-text-35);
}

.sp-step__label {
	font-size: var(--sp-fs-tiny);
	letter-spacing: var(--sp-ls-eyebrow-lg);
	text-transform: uppercase;
	color: var(--sp-text-35);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-step.is-active .sp-step__label,
.sp-step.is-active .sp-step__index {
	color: var(--sp-text);
}