/**
 * Progress bar: .mk-progress-bar (templates/components/progress-bar.php).
 * Track `progressBar.height` (6px), radius 4, `color.progressBar.track`; the fill
 * takes --mk-progress-bar-value of the width in `color.progressBar.fill`.
 */

.mk-progress-bar {
	overflow: hidden;
	block-size: var(--wp--custom--progress-bar--height);
	border-radius: var(--wp--custom--progress-bar--radius);
	background-color: var(--wp--custom--color--progress-bar--track);
}

.mk-progress-bar__fill {
	display: block;
	inline-size: var(--mk-progress-bar-value, 0%);
	block-size: 100%;
	border-radius: inherit;
	background-color: var(--wp--custom--color--progress-bar--fill);
	transition: inline-size var(--wp--custom--motion--duration--base)
		var(--wp--custom--motion--easing--standard);
}

@media (prefers-reduced-motion: reduce) {
	.mk-progress-bar__fill {
		transition: none;
	}
}