/* =========================================
	Circle Counter Layout
========================================= */

.vi-circle-counter {
	--vi-circle-counter-size-current: var(--vi-circle-counter-size-phone, var(--vi-circle-counter-size, 210px));
	--vi-circle-counter-ring-width-current: var(--vi-circle-counter-ring-width-phone, var(--vi-circle-counter-ring-width, 15px));
	--vi-circle-counter-ring-width-safe: min(var(--vi-circle-counter-ring-width-current), calc(var(--vi-circle-counter-size-current) / 2));
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, var(--vi-circle-counter-size-current));
	max-width: 100%;
	aspect-ratio: 1;
	min-width: 0;
	isolation: isolate;
}

.vi-circle-counter--align-left {
	margin-right: auto;
	margin-left: 0;
}

.vi-circle-counter--align-center {
	margin-right: auto;
	margin-left: auto;
}

.vi-circle-counter--align-right {
	margin-right: 0;
	margin-left: auto;
}

/* =========================================
	Circle Counter Ring
========================================= */

.vi-circle-counter .vi-circle-counter__ring {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(
		var(--vi-circle-counter-progress-color, #d0ab31) 0deg,
		var(--vi-circle-counter-progress-color, #d0ab31) var(--vi-circle-counter-progress-angle, 360deg),
		var(--vi-circle-counter-track-color, transparent) var(--vi-circle-counter-progress-angle, 360deg),
		var(--vi-circle-counter-track-color, transparent) 360deg
	);
	pointer-events: none;
	z-index: 1;
}

@supports ((-webkit-mask: radial-gradient(circle, transparent 50%, #000 51%)) or (mask: radial-gradient(circle, transparent 50%, #000 51%))) {
	.vi-circle-counter .vi-circle-counter__ring {
		-webkit-mask: radial-gradient(
			farthest-side,
			transparent calc(100% - var(--vi-circle-counter-ring-width-safe)),
			#000 calc(100% - var(--vi-circle-counter-ring-width-safe) + 1px)
		);
		mask: radial-gradient(
			farthest-side,
			transparent calc(100% - var(--vi-circle-counter-ring-width-safe)),
			#000 calc(100% - var(--vi-circle-counter-ring-width-safe) + 1px)
		);
	}
}

@supports not ((-webkit-mask: radial-gradient(circle, transparent 50%, #000 51%)) or (mask: radial-gradient(circle, transparent 50%, #000 51%))) {
	.vi-circle-counter .vi-circle-counter__ring {
		box-sizing: border-box;
		background: transparent;
		border: var(--vi-circle-counter-ring-width-safe) solid var(--vi-circle-counter-progress-color, #d0ab31);
	}
}

@supports not (background: conic-gradient(#000 0deg, #000 360deg)) {
	.vi-circle-counter .vi-circle-counter__ring {
		box-sizing: border-box;
		background: transparent;
		border: var(--vi-circle-counter-ring-width-safe) solid var(--vi-circle-counter-progress-color, #d0ab31);
	}
}

/* =========================================
	Circle Counter Value
========================================= */

.vi-circle-counter .vi-circle-counter__value {
	grid-area: 1 / 1;
	max-width: calc(100% - (var(--vi-circle-counter-ring-width-safe) * 2));
	min-width: 0;
	color: var(--vi-circle-counter-value-color, #d0ab30);
	font-size: var(--vi-circle-counter-value-size-phone, var(--vi-circle-counter-value-size, 58px));
	font-weight: var(--vi-circle-counter-value-weight, inherit);
	font-variant-numeric: tabular-nums;
	text-align: center;
	overflow-wrap: anywhere;
	z-index: 2;
}

/* =========================================
	Circle Counter Responsive
========================================= */

@media (min-width: 768px) {
	.vi-circle-counter {
		--vi-circle-counter-size-current: var(--vi-circle-counter-size-tablet, var(--vi-circle-counter-size, 210px));
		--vi-circle-counter-ring-width-current: var(--vi-circle-counter-ring-width-tablet, var(--vi-circle-counter-ring-width, 15px));
	}

	.vi-circle-counter .vi-circle-counter__value {
		font-size: var(--vi-circle-counter-value-size-tablet, var(--vi-circle-counter-value-size, 58px));
	}
}

@media (min-width: 981px) {
	.vi-circle-counter {
		--vi-circle-counter-size-current: var(--vi-circle-counter-size-desktop, var(--vi-circle-counter-size, 210px));
		--vi-circle-counter-ring-width-current: var(--vi-circle-counter-ring-width-desktop, var(--vi-circle-counter-ring-width, 15px));
	}

	.vi-circle-counter .vi-circle-counter__value {
		font-size: var(--vi-circle-counter-value-size-desktop, var(--vi-circle-counter-value-size, 58px));
	}
}

/* =========================================
	Circle Counter Motion
========================================= */

@media (prefers-reduced-motion: reduce) {
	.vi-circle-counter,
	.vi-circle-counter .vi-circle-counter__ring,
	.vi-circle-counter .vi-circle-counter__value {
		transition: none;
	}
}