/**handles:geshmak-progress-ring**/
/** בס״ד
 * GESHMAK PROGRESS RING — STRUCTURAL/VISUAL CSS
 *
 * Colour comes from `currentColor` (this element's own Style-tab colour) —
 * see the widget PHP file header for why no custom colour control is used.
 * --gpr-progress is the only property geshmak-progress-ring.js ever writes;
 * everything else here is static, set once by PHP as inline custom
 * properties on the root element.
 *
 * DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/
 */

.geshmak-progress-ring {
	width: var( --gpr-size, 64px );
	height: var( --gpr-size, 64px );
}

.geshmak-progress-ring--fixed {
	position: fixed;
	z-index: 9999;
}

.geshmak-progress-ring--corner-top-left {
	top: var( --gpr-offset, 24px );
	left: var( --gpr-offset, 24px );
}

.geshmak-progress-ring--corner-top-right {
	top: var( --gpr-offset, 24px );
	right: var( --gpr-offset, 24px );
}

.geshmak-progress-ring--corner-bottom-left {
	bottom: var( --gpr-offset, 24px );
	left: var( --gpr-offset, 24px );
}

.geshmak-progress-ring--corner-bottom-right {
	bottom: var( --gpr-offset, 24px );
	right: var( --gpr-offset, 24px );
}

.geshmak-progress-ring::before,
.geshmak-progress-ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	-webkit-mask: radial-gradient( farthest-side, transparent calc( 100% - var( --gpr-stroke, 6px ) ), #000 calc( 100% - var( --gpr-stroke, 6px ) ) );
	mask: radial-gradient( farthest-side, transparent calc( 100% - var( --gpr-stroke, 6px ) ), #000 calc( 100% - var( --gpr-stroke, 6px ) ) );
}

.geshmak-progress-ring::before {
	background: currentColor;
	opacity: var( --gpr-track-opacity, 0.15 );
}

.geshmak-progress-ring::after {
	background: conic-gradient( currentColor calc( var( --gpr-progress, 0 ) * 1% ), transparent 0 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.geshmak-progress-ring::after {
		transition: background 80ms linear;
	}
}

.geshmak-progress-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}