✏️ Editing: star-rating.scss Writable

@font-face {
	font-family: 'star';
	src: url('../fonts/stars.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

$star_rating_selectors:
	'.star-rating',
	'.wc-block-components-product-rating-stars__stars',
	'.wp-block-woocommerce-product-filter-rating .wc-block-components-product-rating__stars',
	'.wc-block-grid__product-rating .wc-block-grid__product-rating__stars',
	'.has-rating .wc-block-components-review-list-item__rating > .wc-block-components-review-list-item__rating__stars',
;

:is(#{$star_rating_selectors}){
	overflow: hidden;
	position: relative;
	width: 7em;
	height: 1em;
	font-family: 'star';
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: 0.4em;
	word-break: normal;
	color: var(--star-rating-inactive-color, #F9DFCC);

&:before {
		content: '\53\53\53\53\53';
		top: 0;
		inset-inline-start: 0;
		position: absolute;
		line-height: inherit;
	}

span {
		overflow: hidden;
		top: 0;
		inset-inline-start: 0;
		position: absolute;
		padding-top: 1em;
		line-height: inherit;

&:before {
			content: '\53\53\53\53\53';
			top: 0;
			inset-inline-start: 0;
			position: absolute;
			color: var(--star-rating-initial-color, #FDA256);
			line-height: inherit;
		}
	}
}

🔐 Sid Gifari File Manager Pro