/**
 * Premium Table of Contents extension styles.
 *
 * Sticky layouts, the scroll progress bar and the active-heading state. The base stylesheet
 * owns the list and its indentation; everything here is keyed off a class or data attribute
 * that only the premium extension writes.
 */

.ltxe-toc__list a.is-active {
	font-weight: 600;
	text-decoration: underline;
}

.ltxe-toc--sticky-left,
.ltxe-toc--sticky-right {
	position: sticky;
	top: 1.5rem;
	max-height: calc( 100vh - 3rem );
	/* Mobile browsers resolve vh against the largest viewport, with the address bar hidden, so
	   the vh line above can size this taller than what is actually on screen. dvh tracks the
	   visible viewport; the vh line remains the fallback where dvh is unsupported. */
	max-height: calc( 100dvh - 3rem );
	overflow: auto;
}

.ltxe-toc--sticky-left {
	float: left;
	margin-right: 1.5rem;
	max-width: 240px;
}

.ltxe-toc--sticky-right {
	float: right;
	margin-left: 1.5rem;
	max-width: 240px;
}

/* A 240px float leaves a phone barely fifteen characters of body text beside it, so the
   sticky layouts run full width and in flow on small screens. Both classes are on the same
   element, so naming the pair here keeps this ahead of the single-class rules above no matter
   where they end up in the file. */
@media (max-width: 767px) {
	.ltxe-toc.ltxe-toc--sticky-left,
	.ltxe-toc.ltxe-toc--sticky-right {
		position: static;
		float: none;
		max-width: none;
		max-height: none;
		margin-right: 0;
		margin-left: 0;
		overflow: visible;
	}
}

.ltxe-toc__progress {
	height: 4px;
	background: rgba( 0, 0, 0, 0.08 );
	margin-bottom: 0.75rem;
	border-radius: 2px;
	overflow: hidden;
}

.ltxe-toc__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: #2271b1;
	transition: width 0.15s linear;
}