/*
 * Front-end styles for pbs/reading-progress. `__PREFIX__` is the neutral class prefix; logical
 * properties only. Loaded only where this block renders. The view module writes
 * --__PREFIX__-reading (0 to 1); the bar scales from the reading-start edge.
 */
.__PREFIX__-reading-progress {
	position: fixed;
	z-index: 100000;
	inset-inline: 0;
	block-size: 4px;
	margin: 0;
	background-color: rgb(0 0 0 / 8%);
	pointer-events: none;
}

:root .__PREFIX__-reading-progress {
	/* A block theme's constrained layout caps its children's width (a rule as specific as the
	   one above, printed later): not this one — it spans the window. */
	max-inline-size: none;
}

.__PREFIX__-reading-progress--top {
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

.__PREFIX__-reading-progress--bottom {
	inset-block-end: 0;
}

.__PREFIX__-reading-progress__bar {
	block-size: 100%;
	background-color: var(--__PREFIX__-reading-color, #1d4ed8);
	transform: scaleX(var(--__PREFIX__-reading, 0));
	transform-origin: 0 50%;
}

.__PREFIX__-reading-progress__bar:dir(rtl) {
	transform-origin: 100% 50%;
}

/* The editor shows it in place, part-filled, with a note of where it sits on the page. */
.__PREFIX__-reading-progress--preview {
	position: static;
	--__PREFIX__-reading: 0.4;
}

.__PREFIX__-reading-progress__note {
	margin-block: 0.5em 0;
	font-size: 0.8125rem;
	opacity: 0.7;
}