/**
 * Process Steps — Style 1: Horizontal Steps
 *
 * Steps sit side by side with centred markers joined by a connector line —
 * the classic onboarding / checkout flow. Collapses to a stacked column on
 * small screens.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-steps.captwiki-style-1 {
	flex-direction: row;
	align-items: stretch;
}

.captwiki-steps.captwiki-style-1 .captwiki-steps__item {
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Connector line between markers. */
.captwiki-steps.captwiki-style-1 .captwiki-steps__item::before {
	content: "";
	position: absolute;
	top: calc( var( --captwiki-ps-marker ) / 2 );
	left: calc( 50% + var( --captwiki-ps-marker ) / 2 + 8px );
	width: calc( 100% + var( --captwiki-ps-gap ) - var( --captwiki-ps-marker ) - 16px );
	height: 3px;
	background: var( --captwiki-ps-line );
	border-radius: 3px;
}

.captwiki-steps.captwiki-style-1 .captwiki-steps__item:last-child::before {
	display: none;
}

.captwiki-steps.captwiki-style-1 .captwiki-steps__marker {
	box-shadow: 0 0 0 6px color-mix( in srgb, var( --captwiki-ps-accent ) 14%, transparent );
}

.captwiki-steps.captwiki-style-1 .captwiki-steps__body {
	padding-top: 16px;
}

@media ( max-width: 767px ) {
	.captwiki-steps.captwiki-style-1 {
		flex-direction: column;
	}

	.captwiki-steps.captwiki-style-1 .captwiki-steps__item {
		flex-direction: row;
		text-align: left;
	}

	.captwiki-steps.captwiki-style-1 .captwiki-steps__item::before {
		top: calc( var( --captwiki-ps-marker ) + 8px );
		left: calc( var( --captwiki-ps-marker ) / 2 - 1.5px );
		width: 3px;
		height: calc( 100% + var( --captwiki-ps-gap ) - var( --captwiki-ps-marker ) - 16px );
	}

	.captwiki-steps.captwiki-style-1 .captwiki-steps__body {
		padding-top: 0;
	}
}
