/**
 * Counter block – front-end styles.
 *
 * @package wuppi-blocks
 */

.wuppi-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.wuppi-counter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary, currentColor);
	margin-bottom: 0.25rem;
}

/* ── Number row ───────────────────────────────────────────────────────────── */

.wuppi-counter__number {
	display: flex;
	align-items: baseline;
	gap: 0.1em;
	line-height: 1.1;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large, 3rem);
	color: var(--wp--preset--color--primary, currentColor);
}

.wuppi-counter__prefix,
.wuppi-counter__suffix {
	font-size: 0.65em;
	font-weight: 600;
	opacity: 0.85;
}

.wuppi-counter__value {
	font-variant-numeric: tabular-nums;
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.wuppi-counter__label {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	color: var(--wp--preset--color--muted-foreground, inherit);
	margin: 0;
}