/*
* @title			ReadProgressBar.css
* @description		Adds a progress bar below the Global Navigation Bar that
					shows how much the user has progressed through a blog post
					(or article).
* @author			Polymeric
* @license			CC-BY-SA 3.0
* @notes			Please install ReadProgressBar.js for full functionality.
**/

/**
*** Moving navbar's contents above (z-axis) the progress bar and it's
*** pseudo-element (more info below).
**/
.fandom-sticky-header > :is(.fandom-sticky-header__logo,
.fandom-sticky-header__sitename,
.fandom-community-header__local-navigation,
.wiki-tools) {
	z-index: 2;
}

/**
*** To avoid using 3D CSS or DOM manipulation to get the progress bar behind the
*** navbar, we create a pseudo-element for .fandom-sticky-header that will be in
*** front of the progress bar (using z-index). It will use the same background
*** color as the navbar in order to visually hide it.
***
*** Using clamp() sets a minimum and maximum value for a given property to try
*** to prevent any future overrides from breaking the progress bar's
*** positioning and dimensions. The prefered value will always be the one set
*** through the variables declared here. Please use those variables rather than
*** the actual CSS properties to customize the progress bar.
**/
.fandom-sticky-header::after {
	background-color: var(--theme-sticky-nav-background-color, #ffc500);
	bottom: 0;
	content: '';
	display: block;
	height: 8px;
	left: var(--desktop-global-navigation-width, 66px);
	pointer-events: none;
	position: absolute;
	width: calc(100% - var(--desktop-global-navigation-width, 66px));
	z-index: 1;
}

.article-progress-bar {
	bottom: 0;
	height: clamp(0px, var(--progress-bar-height, 4px), 8px);
	left: 0;
	transform: translateY(clamp(0px, var(--progress-bar-height, 4px), 8px));
	transition: transform 250ms cubic-bezier(0, 0, .2, 1);
	position: absolute;
	width: 100%;
}

.article-progress-bar.hide {
	transform: translateY(0);
	transition: transform 200ms cubic-bezier(.4, 0, 1, 1);
}

.article-progress-bar__indicator {
	background-color: var(--progress-bar-color, var(--theme-accent-color--hover, #997600));
	border-bottom-right-radius: clamp(0px, calc(var(--progress-bar-border-radius, 0px) / 2), 4px);
	border-top-right-radius: clamp(0px, calc(var(--progress-bar-border-radius, 0px) / 2), 4px);
	height: inherit;
	margin-inline-start: var(--desktop-global-navigation-width, 66px);
	transform: scaleX(0);
	transform-origin: left;
	width: calc(100% - var(--desktop-global-navigation-width, 66px));
	will-change: transform;
}

[dir='rtl'] .article-progress-bar__indicator {
	border-bottom-left-radius: clamp(0px, calc(var(--progress-bar-border-radius, 0px) / 2), 4px);
	border-bottom-right-radius: unset;
	border-top-left-radius: clamp(0px, calc(var(--progress-bar-border-radius, 0px) / 2), 4px);
	border-top-right-radius: unset;
	transform-origin: right;
}

@media (prefers-reduced-motion: reduce) {
	.article-progress-bar {
		transition-duration: 0s !important;
	}
}