/**
 * Domyślny styl chmury tagów Clouddy.
 *
 * Cała logika prezentacji jest tutaj — PHP dostarcza tylko zmienne:
 *   --clouddy-weight  (0–1) na każdym tagu,
 *   --clouddy-min / --clouddy-max (rozmiary skrajne) na kontenerze,
 *   --clouddy-color-a / --clouddy-color-b (kolory skrajne) na kontenerze.
 *
 * Wszystko nadpiszesz własnym CSS bez `!important`.
 */

.clouddy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.6em;
	align-items: baseline;
	line-height: 1.4;
}

.clouddy-tag {
	/* Rozmiar interpolowany liniowo między min a max wg wagi tagu. */
	font-size: calc(
		var(--clouddy-min, 0.8rem) +
		var(--clouddy-weight, 0.5) * (var(--clouddy-max, 2rem) - var(--clouddy-min, 0.8rem))
	);

	/* Kolor interpolowany percepcyjnie (OKLCH) między dwoma kolorami skrajnymi. */
	color: color-mix(
		in oklch,
		var(--clouddy-color-a, currentColor),
		var(--clouddy-color-b, currentColor) calc(var(--clouddy-weight, 0.5) * 100%)
	);

	text-decoration: none;
}

.clouddy-tag:hover,
.clouddy-tag:focus-visible {
	text-decoration: underline;
}

.clouddy-count {
	font-size: 0.75em;
	opacity: 0.7;
}