[data-stepper] {
	--_stepper-gap: var(--stepper-gap-md);
	--_stepper-indicator-size: var(--stepper-indicator-size-md);
	--_stepper-font-size: var(--stepper-font-size-md);
	/* `--_stepper-palette-*` private tokens are TSC-emitted from
	 * `lib/recipes/base.ts > stepper._palette-*` with the per-color cascade;
	 * the THM-2 shared-layer forward routes them to `color="teal"` + 33 scales. */

	display: grid;
	gap: var(--_stepper-gap);
	min-inline-size: 0;
	font-family: var(--stepper-font-family);
	font-size: var(--_stepper-font-size);
	line-height: var(--stepper-line-height);
	color: var(--stepper-color);
}

[data-stepper][data-size='sm'] {
	--_stepper-gap: var(--stepper-gap-sm);
	--_stepper-indicator-size: var(--stepper-indicator-size-sm);
	--_stepper-font-size: var(--stepper-font-size-sm);
}

[data-stepper][data-size='lg'] {
	--_stepper-gap: var(--stepper-gap-lg);
	--_stepper-indicator-size: var(--stepper-indicator-size-lg);
	--_stepper-font-size: var(--stepper-font-size-lg);
}

[data-stepper-list] {
	display: flex;
	align-items: stretch;
	gap: var(--stepper-list-gap);
	padding: 0;
	margin: 0;
	list-style: none;
}

[data-stepper-list][data-orientation='vertical'] {
	flex-direction: column;
}

[data-stepper-item] {
	display: grid;
	grid-template-columns: auto minmax(var(--stepper-separator-min-size), 1fr);
	align-items: center;
	gap: var(--stepper-item-gap);
	min-inline-size: 0;
}

[data-stepper-item][data-orientation='vertical'] {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto minmax(var(--stepper-separator-min-size), 1fr);
	align-items: start;
}

[data-stepper-trigger] {
	display: inline-flex;
	align-items: center;
	gap: var(--stepper-trigger-gap);
	min-inline-size: 0;
	padding-block: var(--stepper-trigger-padding-block);
	padding-inline: var(--stepper-trigger-padding-inline);
	border: var(--stepper-trigger-border-width) solid transparent;
	border-radius: var(--stepper-trigger-radius);
	background: transparent;
	color: var(--stepper-trigger-color);
	font: inherit;
	text-align: start;
	cursor: pointer;
	outline: none;
	transition:
		background var(--stepper-transition-duration) var(--stepper-transition-ease),
		border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
		color var(--stepper-transition-duration) var(--stepper-transition-ease),
		box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
}

[data-stepper-trigger]:hover:not([data-disabled]) {
	background-image: linear-gradient(var(--state-hover), var(--state-hover));
	color: var(--stepper-trigger-color-hover);
}

[data-stepper-trigger]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-stepper-indicator] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--_stepper-indicator-size);
	block-size: var(--_stepper-indicator-size);
	border: var(--stepper-indicator-border-width) solid var(--stepper-indicator-border);
	border-radius: var(--stepper-indicator-radius);
	background: var(--stepper-indicator-bg);
	color: var(--stepper-indicator-color);
	font-weight: var(--stepper-indicator-font-weight);
}

[data-stepper-trigger][data-state='current'] [data-stepper-indicator],
[data-stepper-indicator][data-state='current'] {
	border-color: var(--_stepper-palette-border);
	background: var(--_stepper-palette-track);
	color: var(--_stepper-palette-text);
}

[data-stepper-trigger][data-state='complete'] [data-stepper-indicator],
[data-stepper-indicator][data-state='complete'] {
	border-color: var(--_stepper-palette-solid);
	background: var(--_stepper-palette-solid);
	color: var(--stepper-complete-color);
}

[data-stepper][data-variant='outline'] [data-stepper-indicator][data-state='current'],
[data-stepper][data-variant='outline']
	[data-stepper-trigger][data-state='current']
	[data-stepper-indicator] {
	background: transparent;
	color: var(--_stepper-palette-text);
}

[data-stepper][data-variant='solid'] [data-stepper-indicator][data-state='current'],
[data-stepper][data-variant='solid']
	[data-stepper-trigger][data-state='current']
	[data-stepper-indicator] {
	border-color: var(--_stepper-palette-solid);
	background: var(--_stepper-palette-solid);
	color: var(--stepper-complete-color);
}

[data-stepper-separator] {
	align-self: center;
	min-inline-size: var(--stepper-separator-min-size);
	block-size: var(--stepper-separator-thickness);
	border-radius: var(--stepper-separator-radius);
	background: var(--stepper-separator-bg);
}

[data-stepper-separator][data-orientation='vertical'] {
	justify-self: center;
	inline-size: var(--stepper-separator-thickness);
	block-size: 100%;
	min-block-size: var(--stepper-separator-min-size);
}

[data-stepper-separator][data-state='complete'] {
	background: var(--_stepper-palette-solid);
}

[data-stepper-content],
[data-stepper-completed-content] {
	padding: var(--stepper-content-padding);
	border: var(--stepper-content-border-width) solid var(--stepper-content-border);
	border-radius: var(--stepper-content-radius);
	background: var(--stepper-content-bg);
	color: var(--stepper-color);
	box-shadow: var(--stepper-content-shadow);
	outline: none;
}

[data-stepper-content]:focus-visible,
[data-stepper-completed-content]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-stepper-prev-trigger],
[data-stepper-next-trigger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: var(--stepper-nav-height);
	padding-inline: var(--stepper-nav-padding-inline);
	border: var(--stepper-nav-border-width) solid var(--stepper-nav-border);
	border-radius: var(--stepper-nav-radius);
	background: var(--stepper-nav-bg);
	color: var(--stepper-nav-color);
	font: inherit;
	cursor: pointer;
	outline: none;
	transition:
		background var(--stepper-transition-duration) var(--stepper-transition-ease),
		border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
		color var(--stepper-transition-duration) var(--stepper-transition-ease),
		box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
}

[data-stepper-next-trigger] {
	border-color: var(--_stepper-palette-border);
	background: var(--_stepper-palette-solid);
	color: var(--stepper-complete-color);
}

[data-stepper-prev-trigger]:hover:not(:disabled),
[data-stepper-next-trigger]:hover:not(:disabled) {
	filter: brightness(var(--stepper-nav-hover-brightness));
}

[data-stepper-prev-trigger]:focus-visible,
[data-stepper-next-trigger]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-stepper-trigger][data-disabled],
[data-stepper-prev-trigger][data-disabled],
[data-stepper-next-trigger][data-disabled] {
	cursor: default;
	opacity: var(--stepper-disabled-opacity);
}

@media (prefers-reduced-motion: reduce) {
	[data-stepper-trigger],
	[data-stepper-prev-trigger],
	[data-stepper-next-trigger] {
		transition: none;
	}
}