/**handles:geshmak-progress-bar**/
/** בס״ד
 * GESHMAK PROGRESS BAR — STRUCTURAL/VISUAL CSS
 *
 * Colour comes from `currentColor` (this element's own Style-tab colour) —
 * see the widget PHP file header for why no custom colour control is used.
 * --gpb-progress is the only property geshmak-progress-bar.js ever writes;
 * height/track-opacity are static, set once by PHP as inline custom
 * properties on the root element. `top` (default) vs `bottom` (Position =
 * bottom) is owned entirely here rather than by the widget's atomic base
 * style, so both rules share one stylesheet with a predictable cascade order.
 *
 * DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/
 */

.geshmak-progress-bar {
	top: 0;
	height: var( --gpb-height, 4px );
}

.geshmak-progress-bar--bottom {
	top: auto;
	bottom: 0;
}

.geshmak-progress-bar::before,
.geshmak-progress-bar::after {
	content: "";
	position: absolute;
	inset: 0;
}

.geshmak-progress-bar::before {
	background: currentColor;
	opacity: var( --gpb-track-opacity, 0.12 );
}

.geshmak-progress-bar::after {
	width: calc( var( --gpb-progress, 0 ) * 1% );
	background: linear-gradient(
		90deg,
		currentColor 0%,
		color-mix( in srgb, currentColor 55%, white ) 50%,
		currentColor 100%
	);
	background-size: 200% 100%;
}

@media ( prefers-reduced-motion: no-preference ) {
	.geshmak-progress-bar:not( .geshmak-progress-bar--no-shimmer )::after {
		animation: geshmak-progress-bar-sweep 2.2s linear infinite;
	}
}

@keyframes geshmak-progress-bar-sweep {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}