.wizard-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--spacing));

	> li {
		width: calc(10 * var(--spacing));
		height: calc(10 * var(--spacing));
		border-radius: 50%;

		&.complete {
			background-color: var(--bg-color-dark);
			color: var(--bg-color-light);
		}

		&.current {
			background-color: var(--color-neutral-900);
			color: var(--bg-color-light);
		}

		&.incomplete {
			background-color: var(--bg-color-light);
			color: var(--color-neutral-900);
			border: 2px solid var(--bg-color-dark);
		}

		&[role="presentation"] {
			width: calc(16 * var(--spacing));
			height: calc(0.5 * var(--spacing));
			background-color: var(--bg-color-dark);
			border-radius: calc(0.25 * var(--spacing));

			@media (width < 40rem) { display: none }
		}

		> a {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}