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

.star-rating {
	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;
	color: var(--star-rating-inactive-color, #F9DFCC);

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

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

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