/**
 * Build time + complexity chart — shared by vehicle-configurator/build-time and
 * the comparison-table "Byggetid" row (markup: render_build_time() in the
 * monolith). Registered as style handle `vc-build-time`. Consumes at-theme
 * design tokens (fallbacks only for installs without at-theme).
 */

.vc-buildtime {
	--vc-bt-border: var( --wp--preset--color--light-grey, #e5e5e5 );
	--vc-bt-ink: var( --wp--preset--color--black, #101012 );
	--vc-bt-accent: var( --wp--preset--color--original-blue, #0071ce );
	--vc-bt-accent-deep: var( --wp--preset--color--medium-blue, #004e8c );
	--vc-bt-muted: var( --wp--preset--color--grey, #676767 );
	--vc-bt-surface: var( --wp--preset--color--white, #fff );
}

.vc-buildtime > p {
	margin: 0;
}

.vc-buildtime__title {
	margin-bottom: 0.875rem !important;
	font-weight: 800;
}

.vc-buildtime__chart {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
}

.vc-buildtime__stop-start {
	stop-color: var( --vc-bt-accent );
	stop-opacity: 0.15;
}

.vc-buildtime__stop-end {
	stop-color: var( --vc-bt-accent-deep );
	stop-opacity: 1;
}

.vc-buildtime__grid {
	stroke: var( --vc-bt-border );
	stroke-width: 1;
}

.vc-buildtime__grid.is-active {
	stroke: var( --vc-bt-accent );
	stroke-width: 1.5;
}

.vc-buildtime__num {
	font-size: 11px;
	fill: var( --vc-bt-muted );
}

.vc-buildtime__num.is-active {
	fill: var( --vc-bt-accent );
	font-weight: 700;
}

.vc-buildtime__caption {
	margin-top: 0.625rem !important;
	font-weight: 700;
	font-size: var( --wp--preset--font-size--body-sm, 0.8125rem );
}

.vc-buildtime__spec {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.125rem;
	padding: 0.75rem 1.25rem;
	border: 1.5px solid var( --vc-bt-ink );
	border-radius: var( --wp--custom--border-radius--button, 4px );
	font-size: var( --wp--preset--font-size--body-sm, 0.8125rem );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var( --vc-bt-ink );
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vc-buildtime__spec:hover,
.vc-buildtime__spec:focus-visible {
	background: var( --vc-bt-accent );
	border-color: var( --vc-bt-accent );
	color: var( --vc-bt-surface );
}

@media ( prefers-reduced-motion: reduce ) {
	.vc-buildtime__spec {
		transition: none;
	}
}