/* ------------------------------------------------------------------ */
/*  Root & scroll chrome                                                */
/* ------------------------------------------------------------------ */

.root {
	position: relative;
	background: variables.$bg-default;
	border-bottom: 1px solid variables.$border-subtle;
}

.fadeLeft,
.fadeRight {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	pointer-events: none;
	z-index: 2;
}

.fadeLeft {
	left: 0;
	background: linear-gradient(to right, variables.$bg-default, transparent);
}

.fadeRight {
	right: 0;
	background: linear-gradient(to left, variables.$bg-default, transparent);
}

.scrollContainer {
	overflow-x: auto;
	padding: 12px 20px;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/*  Phase row                                                           */
/* ------------------------------------------------------------------ */

.phases {
	display: flex;
	align-items: center;
	min-width: max-content;
	justify-content: center;
}

/* ------------------------------------------------------------------ */
/*  Phase (shared)                                                      */
/* ------------------------------------------------------------------ */

.phase {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 4px 4px;
	border-radius: variables.$radius-sm;
	white-space: nowrap;
	transition: background-color var(--duration-normal) var(--ease-out);
}

/* ------------------------------------------------------------------ */
/*  Indicator circle                                                    */
/* ------------------------------------------------------------------ */

.indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	transition: all var(--duration-normal) var(--ease-out);
}

.indicatorCompleted {
	background: color-mix(in srgb, variables.$color-success 10%, variables.$bg-default);
	border: 1.5px solid color-mix(in srgb, variables.$color-success 25%, variables.$border-default);
	color: variables.$color-success;
}

.indicatorActive {
	background: variables.$color-secondary;
	color: variables.$color-white;
	border: none;
}

.indicatorUpcoming {
	background: variables.$bg-default;
	border: 1.5px solid variables.$border-default;
	color: variables.$text-tertiary;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  Phase label                                                         */
/* ------------------------------------------------------------------ */

.phaseLabel {
	@include typography.font-caption-m;
	white-space: nowrap;
}

.phaseCompleted .phaseLabel {
	color: variables.$text-secondary;
}

.phaseActive .phaseLabel {
	@include typography.font-body-14(600);
	color: variables.$text-primary;
}

.phaseUpcoming .phaseLabel {
	color: variables.$text-tertiary;
}

/* ------------------------------------------------------------------ */
/*  Active phase pill background                                        */
/* ------------------------------------------------------------------ */

.phaseActive {
	background: color-mix(in srgb, variables.$color-secondary 4%, transparent);
	padding: 6px 12px 6px 6px;
}

/* ------------------------------------------------------------------ */
/*  Substep dots (inline, active phase only)                            */
/* ------------------------------------------------------------------ */

.substepDots {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 2px;
}

.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: all var(--duration-normal) var(--ease-out);
}

.dotCompleted {
	background: variables.$color-success;
}

.dotActive {
	background: variables.$color-secondary;
	box-shadow: 0 0 0 2.5px color-mix(in srgb, variables.$color-secondary 18%, transparent);
}

.dotUpcoming {
	background: transparent;
	border: 1.5px solid variables.$border-default;
}

/* ------------------------------------------------------------------ */
/*  Connectors                                                          */
/* ------------------------------------------------------------------ */

.connector {
	width: 24px;
	height: 1.5px;
	flex-shrink: 0;
}

.connectorCompleted {
	background: color-mix(in srgb, variables.$color-success 40%, variables.$border-default);
}

.connectorActive {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, variables.$color-success 40%, variables.$border-default),
		color-mix(in srgb, variables.$color-secondary 40%, variables.$border-default)
	);
}

.connectorUpcoming {
	background: none;
	border-top: 1.5px dashed variables.$border-default;
	height: 0;
}

/* ------------------------------------------------------------------ */
/*  Mobile overrides                                                    */
/* ------------------------------------------------------------------ */

@include breakpoints.respond-to(breakpoints.$mobileMax) {
	.fadeLeft,
	.fadeRight {
		width: 28px;
	}

	.scrollContainer {
		padding: 10px 12px;
	}

	.connector {
		width: 16px;
	}
}
