/**
 * Reading progress bar styles.
 *
 * A scroll-progress indicator that fills as the user reads article content.
 * Sits inside the sticky header, below the navbar.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Progress Bar Wrapper
   ========================================================================== */

.hm-reading-progress {
	padding: 10px 0 0 0;
	max-width: var(--hm-container-width);
	margin-inline: auto;
	opacity: 0;
	transition: opacity var(--hm-transition-base);
}

.hm-reading-progress--visible {
	opacity: 1;
}

/* ==========================================================================
   Track (white pill background)
   ========================================================================== */

.hm-reading-progress__track {
	background-color: #fff;
	border-radius: 100px;
	padding: 3px;
}

/* ==========================================================================
   Fill (orange progress indicator)
   ========================================================================== */

.hm-reading-progress__fill {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: var(--hm-color-reading-progress, #ef9020);
	border-radius: 100px;
	padding: 4px 5px;
	min-width: 0;
	width: 0%;
	overflow: hidden;
	transition: width 150ms linear;
}

/* ==========================================================================
   Percentage Text
   ========================================================================== */

.hm-reading-progress__percent {
	font-family: var(--hm-font-primary);
	font-size: 8px;
	font-weight: 400;
	line-height: 1;
	color: #212121;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
}