// Mirrors the legacy .wp-block-affr .affr-rating-icons rules.
.wp-block-affreviews-rating-stars {
	.affr-rating-icons {
		white-space: nowrap;

		svg {
			fill: var(--affr-rating-color, #e02928);
			margin: 0 1.5px;
		}
	}

	// A font size picked in the editor scales the stars.
	&[class*="font-size"] .affr-rating-icons svg {
		width: 1.5em;
		height: 1.5em;
	}

	// Small stars: 18px instead of the icons' 24px, or a smaller multiple of
	// a picked font size.
	&.is-star-size-small .affr-rating-icons svg {
		width: 18px;
		height: 18px;
		margin: 0 1px;
	}

	&.is-star-size-small[class*="font-size"] .affr-rating-icons svg {
		width: 1.125em;
		height: 1.125em;
	}

	// Numeric score sits next to the stars.
	.affr-rating:has(+ .affr-rating-number) {
		display: inline-block;
		vertical-align: middle;
	}

	.affr-rating-number {
		margin-left: 0.5rem;
		vertical-align: middle;
		font-weight: 600;
		font-size: 1em;
	}
}