/**
 * Elite Kit — Reading Progress Bar
 *
 * Everything the panel styles is written by Elementor into the kit stylesheet;
 * what lives here is the geometry that never changes, plus the one custom
 * property the script writes as the page scrolls.
 */

.ek-reading-progress {
	position: fixed;
	pointer-events: none;
	z-index: var(--ek-rp-z, 99999);
	/* Set by the script, 0 to 1. */
	--ek-rp-progress: 0;
}

/*
 * A colour to start from, so the bar is visible the moment it is switched on.
 * Fill Color in the panel overrides it: Elementor writes that rule against the
 * kit's body class, which outranks this one whichever order they load in.
 */
.ek-reading-progress__fill {
	background-color: #4c6fff;
}

/* Horizontal ------------------------------------------------------------- */

.ek-reading-progress--horizontal {
	left: 0;
	right: 0;
	height: var(--ek-rp-height, 8px);
}

.ek-reading-progress--top {
	top: var(--ek-rp-offset, 0px);
}

.ek-reading-progress--bottom {
	bottom: var(--ek-rp-offset, 0px);
}

.ek-reading-progress--horizontal .ek-reading-progress__fill {
	display: block;
	width: 100%;
	height: 100%;
	/* Scaling is cheaper than animating width: no layout on any frame. */
	transform: scaleX(var(--ek-rp-progress, 0));
	transform-origin: left center;
	will-change: transform;
}

/* Vertical ---------------------------------------------------------------- */

.ek-reading-progress--vertical {
	top: var(--ek-rp-offset, 0px);
	bottom: 0;
	width: var(--ek-rp-width, 8px);
}

.ek-reading-progress--left {
	left: var(--ek-rp-side, 0px);
}

.ek-reading-progress--right {
	right: var(--ek-rp-side, 0px);
}

.ek-reading-progress--vertical .ek-reading-progress__fill {
	display: block;
	width: 100%;
	height: 100%;
	/* Fills downward, the way the page is read. */
	transform: scaleY(var(--ek-rp-progress, 0));
	transform-origin: center top;
	will-change: transform;
}

/* Circular --------------------------------------------------------------- */

.ek-reading-progress--circular {
	width: var(--ek-rp-size, 60px);
	height: var(--ek-rp-size, 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.ek-reading-progress--top-left {
	top: var(--ek-rp-offset, 0px);
	left: var(--ek-rp-side, 20px);
}

.ek-reading-progress--top-right {
	top: var(--ek-rp-offset, 0px);
	right: var(--ek-rp-side, 20px);
}

.ek-reading-progress--bottom-left {
	bottom: var(--ek-rp-offset, 0px);
	left: var(--ek-rp-side, 20px);
}

.ek-reading-progress--bottom-right {
	bottom: var(--ek-rp-offset, 0px);
	right: var(--ek-rp-side, 20px);
}

/*
 * The fill keeps whatever background the panel gave it — a colour or a gradient
 * — and a mask reveals the travelled part of the ring. Two masks: the wedge, and
 * a hole in the middle that turns the disc into a ring.
 */
.ek-reading-progress--circular .ek-reading-progress__fill {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	-webkit-mask:
		conic-gradient(#000 calc(var(--ek-rp-progress, 0) * 360deg), transparent 0),
		radial-gradient(closest-side, transparent calc(100% - var(--ek-rp-thickness, 6px)), #000 0);
	mask:
		conic-gradient(#000 calc(var(--ek-rp-progress, 0) * 360deg), transparent 0),
		radial-gradient(closest-side, transparent calc(100% - var(--ek-rp-thickness, 6px)), #000 0);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.ek-reading-progress--circular .ek-reading-progress__track {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--ek-rp-thickness, 6px)), #000 0);
	mask: radial-gradient(closest-side, transparent calc(100% - var(--ek-rp-thickness, 6px)), #000 0);
}

/* Percentage tool tip ---------------------------------------------------- */

.ek-reading-progress__tip {
	position: absolute;
	display: block;
	padding: 2px 7px;
	font-size: 11px;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 3px;
	transform: translateX(-50%);
	/* Readable the moment the tool tip is switched on; the panel's Color and
	   Background Color override these the same way Fill Color does. */
	color: #fff;
	background-color: #4c6fff;
}

.ek-reading-progress--horizontal .ek-reading-progress__tip {
	left: calc(var(--ek-rp-progress, 0) * 100%);
}

.ek-reading-progress--top .ek-reading-progress__tip {
	top: 100%;
	margin-top: 4px;
}

.ek-reading-progress--bottom .ek-reading-progress__tip {
	bottom: 100%;
	margin-bottom: 4px;
}

/* Riding down the bar, clear of the edge it runs along. */
.ek-reading-progress--vertical .ek-reading-progress__tip {
	top: calc(var(--ek-rp-progress, 0) * 100%);
	transform: translateY(-50%);
}

.ek-reading-progress--left .ek-reading-progress__tip {
	left: 100%;
	margin-left: 4px;
}

.ek-reading-progress--right .ek-reading-progress__tip {
	right: 100%;
	margin-right: 4px;
}

.ek-reading-progress--circular .ek-reading-progress__tip {
	position: relative;
	transform: none;
	/* Inside the ring there is nothing to sit on, so it takes the page's colour. */
	background: none;
	color: inherit;
	padding: 0;
}

.ek-reading-progress--no-tip .ek-reading-progress__tip {
	display: none;
}

.ek-reading-progress--hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.ek-reading-progress--hide-mobile {
		display: block;
	}

	.ek-reading-progress--hide-mobile.ek-reading-progress--circular {
		display: flex;
	}
}