.mosaic-stars {
	--mosaic-star-on: #f5a623;
	--mosaic-star-off: #d5d9e2;
	--mosaic-star-size: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
}

.mosaic-stars__row {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.mosaic-stars__layer {
	display: flex;
	white-space: nowrap;
}

.mosaic-stars__layer--empty {
	color: var(--mosaic-star-off);
}

.mosaic-stars__layer--full {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--mosaic-star-on);
}

.mosaic-stars__star {
	flex: none;
	inline-size: var(--mosaic-star-size);
	block-size: var(--mosaic-star-size);
	fill: currentColor;
}

.mosaic-stars__number {
	font-weight: 700;
}

.mosaic-stars__label {
	color: var(--mosaic-color-muted, #5a6070);
	font-size: 0.95em;
}