/*
 * SECTION:  Order steps (Cart, Checkout, Payment)
 * File:     assets/css/sections/sol-steps.css
 * Used by:  inc/checkout-steps.php, on the cart and checkout pages
 * To remove: delete this file, inc/checkout-steps.php, its name in functions.php and its line in inc/assets.php.
 */
.sol-steps {
	max-width: var(--sol-container);
	margin-inline: auto;
	padding: 24px var(--sol-gutter) 0;
}

.sol-steps__list {
	display: flex;
	align-items: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sol-steps__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* The line before every step except the first. */
.sol-steps__item + .sol-steps__item {
	flex: 1;
}

.sol-steps__item + .sol-steps__item::before {
	content: "";
	flex: 1;
	min-width: 12px;
	height: 2px;
	margin-inline: 10px;
	border-radius: 2px;
	background: var(--sol-line);
}

.sol-steps__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--sol-muted);
	font-size: var(--sol-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sol-steps__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--sol-line);
	border-radius: 50%;
	font-size: 0.8125rem;
	transition: background-color var(--sol-fast) ease, border-color var(--sol-fast) ease;
}

.sol-steps__num svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Current step: the only colored one. */
.sol-steps__item.is-current .sol-steps__link {
	color: var(--sol-text);
}

.sol-steps__item.is-current .sol-steps__num {
	border-color: var(--sol-accent);
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
}

/* Earlier steps are links back. */
a.sol-steps__link:hover {
	color: var(--sol-text);
}

a.sol-steps__link:hover .sol-steps__num {
	border-color: var(--sol-gold-text);
}

@media (max-width: 479px) {
	.sol-steps__link {
		gap: 6px;
	}

	.sol-steps__num {
		width: 28px;
		height: 28px;
	}

	.sol-steps__item + .sol-steps__item::before {
		margin-inline: 6px;
	}
}