/* Reading progress bar (inc/reading-progress.php). Mobile first: on a phone
   the admin bar scrolls away with the page, so the bar sits at the very top
   beneath it (lower z-index) and never covers it. From 601px the admin bar
   is fixed, and the bar starts below it. */
.boi-progress {
	position: fixed;
	inset-inline: 0;
	z-index: 99990;
	block-size: var(--boi-progress-height, 4px);
	pointer-events: none;
	background: transparent;
}

.boi-progress--top {
	inset-block-start: 0;
}

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

.boi-progress__fill {
	block-size: 100%;
	background: var(--boi-progress-color, var(--wp--preset--color--accent-2, #E8B33C));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.1s linear;
	will-change: transform;
}

[dir="rtl"] .boi-progress__fill {
	transform-origin: right center;
}

@media (min-width: 601px) {
	.admin-bar .boi-progress--top {
		inset-block-start: var(--wp-admin--admin-bar--height, 32px);
	}
}

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

@media print {
	.boi-progress {
		display: none;
	}
}