/**
 * Strength bar: template-parts/ui/strength-bar.php (DS/Strength Bar 2059:20).
 * 8px track in line colour; the fill runs from the start to the marker, with
 * the green > yellow > orange gradient laid over the whole track; 11px marker
 * with a 3px ink ring. --strength (0-1: power (p - 1) / 9, or the level
 * 0 / 0.5 / 1 without a power) places the marker; it stays inside the track.
 */

.strength-bar {
	--strength-marker: 14px;

	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.strength-bar__track {
	position: relative;
	display: block;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--color-line);
}

/* The gradient spans the whole track and the fill is clipped at the marker,
 * so the colour at the end of the fill is the colour of that point on the
 * 1-10 scale (decision 19). Steps sit at (p - 1) / 9: 4 at 33.3%, 5 at
 * 44.4%, 7 at 66.7%, 8 at 77.8%. The colour changes only between steps, so
 * the visible end of the fill is green up to 4, yellow from 5 to 7 and
 * orange from 8. A Chill bar stays green. */
.strength-bar__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to right,
		var(--color-green) 34%,
		var(--color-yellow) 40%,
		var(--color-yellow) 67%,
		var(--color-orange) 73%
	);
	clip-path: inset(0 calc(100% - (var(--strength-marker) / 2 + (100% - var(--strength-marker)) * var(--strength))) 0 0 round var(--radius-pill));
}

.strength-bar__marker {
	position: absolute;
	top: 50%;
	left: calc((100% - var(--strength-marker)) * var(--strength));
	box-sizing: border-box;
	width: var(--strength-marker);
	height: var(--strength-marker);
	border: 3px solid var(--color-ink);
	border-radius: 50%;
	background: var(--color-cream);
	transform: translateY(-50%);
}

.strength-bar__labels {
	display: flex;
	justify-content: space-between;
	color: var(--color-muted);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	white-space: nowrap;
}

.strength-bar__label.is-current {
	color: var(--color-ink);
}

/* Large (product page power bar 2162:711): white card, line border, radius
 * 24, 20px / 24px padding; "Strength" in Label/M; 10px track; 22px marker
 * with a 4px ink ring; 14px between the rows. */
.strength-bar--large {
	--strength-marker: 22px;

	box-sizing: border-box;
	gap: 14px;
	padding: 20px 24px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.strength-bar__title {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.strength-bar--large .strength-bar__track {
	height: 10px;
}

.strength-bar--large .strength-bar__marker {
	border-width: 4px;
}

/* Segments (cart line 2186:1411): three 28 x 6 segments 4px apart, filled up
 * to the level in green, yellow, orange; the level name in Label/S ink. */
.strength-bar--segments {
	flex-direction: row;
	align-items: center;
	gap: 4px;
	width: auto;
}

.strength-bar__segment {
	flex: none;
	width: 28px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-line);
}

.strength-bar__segment.is-on {
	background: var(--color-green);
}

.strength-bar__segment.is-on:nth-child(2) {
	background: var(--color-yellow);
}

.strength-bar__segment.is-on:nth-child(3) {
	background: var(--color-orange);
}

.strength-bar--segments .strength-bar__label {
	color: var(--color-ink);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

/* Power (decision 19): head row above the track, "Power" and the score.
 * Cards: Label/S, title muted, score ink. Large: Label/M, both ink. */
.strength-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.strength-bar__head .strength-bar__title {
	color: var(--color-muted);
	font-size: var(--text-label-s);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.strength-bar--large .strength-bar__head .strength-bar__title {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	letter-spacing: normal;
	line-height: var(--leading-label-m);
}

.strength-bar__score {
	color: var(--color-ink);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	white-space: nowrap;
}

.strength-bar--large .strength-bar__score {
	font-size: var(--text-label-m);
	letter-spacing: normal;
	line-height: var(--leading-label-m);
}