.mosaic-ic {
	--mosaic-ic-ring: var(--mosaic-color-border, #d5d9e2);
	--mosaic-ic-dot: var(--mosaic-color-primary, #2b4acb);
	--mosaic-ic-active: var(--mosaic-color-accent, #e08a00);
	--mosaic-ic-size: 26rem;
}

.mosaic-ic__ring {
	position: relative;
	inline-size: min(var(--mosaic-ic-size), 100%);
	aspect-ratio: 1;
	margin-inline: auto;
	border: 2px dashed var(--mosaic-ic-ring);
	border-radius: 50%;
}

.mosaic-ic__center {
	position: absolute;
	inset: 18%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	text-align: center;
}

.mosaic-ic__title {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
	font-weight: 700;
}

.mosaic-ic__text {
	margin: 0;
	font-size: 0.95rem;
}

.mosaic-ic__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each point is turned round the middle and then turned back upright. */
.mosaic-ic__point {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-start: -1.75rem;
	margin-inline-start: -1.75rem;
	transform: rotate(calc(var(--i) * 360deg / var(--mosaic-ic-n))) translateY(calc(var(--mosaic-ic-size) / -2 + 0px)) rotate(calc(var(--i) * -360deg / var(--mosaic-ic-n)));
}

@supports (width: min(1px, 1px)) {
	.mosaic-ic__point {
		transform: rotate(calc(var(--i) * 360deg / var(--mosaic-ic-n))) translateY(calc(min(var(--mosaic-ic-size), 100vw - 2rem) / -2)) rotate(calc(var(--i) * -360deg / var(--mosaic-ic-n)));
	}
}

.mosaic-ic__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mosaic-ic-dot);
	color: #fff;
	cursor: pointer;
	font-size: 1.5rem;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mosaic-ic__btn[hidden] {
	display: none;
}

.mosaic-ic__btn.is-active,
.mosaic-ic__btn:hover {
	background: var(--mosaic-ic-active);
	transform: scale(1.1);
}

.mosaic-ic__btn:focus-visible {
	outline: 3px solid var(--mosaic-ic-active);
	outline-offset: 3px;
}

.mosaic-ic__label {
	display: none;
}

/* The full list is for visitors without the script; with it, it is hidden. */
.mosaic-ic__all {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.mosaic-ic.is-ready .mosaic-ic__all {
	display: none;
}

.mosaic-ic:not(.is-ready) .mosaic-ic__point {
	display: none;
}

.mosaic-ic:not(.is-ready) .mosaic-ic__ring {
	display: none;
}

/* Narrow screens: no ring, a column of buttons above the chosen text. */
@media (max-width: 40rem) {
	.mosaic-ic__ring {
		inline-size: 100%;
		aspect-ratio: auto;
		border: 0;
		border-radius: 0;
	}

	.mosaic-ic__center {
		position: static;
		padding: 1rem 0 0;
		order: 2;
	}

	.mosaic-ic__ring {
		display: flex;
		flex-direction: column;
	}

	.mosaic-ic__points {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		justify-content: center;
	}

	.mosaic-ic__point {
		position: static;
		margin: 0;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-ic__btn {
		transition: none;
	}

	.mosaic-ic__btn.is-active,
	.mosaic-ic__btn:hover {
		transform: none;
	}
}