/**
 * NTP Score rings — paired with template-parts/.../part-ntp-score.php
 *
 * @package NewTechPrice
 */

.ntp-ntp-score__ring {
	--ntp-score-frac: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(6.5rem, 5.5rem + 2.5vw, 7.5rem);
	height: clamp(6.5rem, 5.5rem + 2.5vw, 7.5rem);
}

.ntp-ntp-score__ring--expert {
	width: clamp(7.5rem, 6.25rem + 3vw, 8.75rem);
	height: clamp(7.5rem, 6.25rem + 3vw, 8.75rem);
}

.ntp-ntp-score__ring-svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ntp-ntp-score__ring-track {
	fill: none;
	stroke: rgb(226 232 240 / 0.95);
	stroke-width: 7;
}

[data-theme='dark'] .ntp-ntp-score__ring-track {
	stroke: rgb(51 65 85 / 0.85);
}

.ntp-ntp-score__ring-arc {
	fill: none;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-track,
.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-arc {
	stroke-width: 6.5;
}

.ntp-ntp-score__ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
}

.ntp-ntp-score__ring--pillar .ntp-ntp-score__ring-label {
	flex-direction: column;
	gap: 0;
}

.ntp-ntp-score__ring-value {
	font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem);
	letter-spacing: -0.03em;
	color: var(--ntp-primary-color, #0a1931);
}

[data-theme='dark'] .ntp-ntp-score__ring-value {
	color: rgb(248 250 252);
}

.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-value {
	font-size: clamp(1.4rem, 1.2rem + 0.55vw, 1.75rem);
}

.ntp-ntp-score__ring-max {
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	font-weight: 700;
	color: rgb(100 116 139);
}

[data-theme='dark'] .ntp-ntp-score__ring-max {
	color: rgb(148 163 184);
}

@media (prefers-reduced-motion: no-preference) {
	.ntp-ntp-score__ring-arc--animate {
		animation: ntp-ntp-score-ring-draw 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	@keyframes ntp-ntp-score-ring-draw {
		to {
			stroke-dashoffset: calc(100 * (1 - var(--ntp-score-frac, 0)));
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ntp-ntp-score__ring-arc--animate {
		stroke-dashoffset: calc(100 * (1 - var(--ntp-score-frac, 0)));
		animation: none;
	}
}