[class*="five-rate-"],.rating-scale,figure[class*='notation'] {
	--rating-mask-full: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\<path d="m16.04,0l4.89,10.5,11.07,1.7-7.98,8.24,1.88,11.56-9.86-5.49-9.93,5.49,1.88-11.56L0,12.19l11.07-1.7L16.04,0Z"/>\ </svg>');
	--rating-mask-half: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\ <path d="m16,.08v26.45l-9.89,5.47,1.88-11.56L0,12.19l11.07-1.7L16,.08Z"/>\ </svg>');
	--rating-mask-empty: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\ <path d="m25.91,32l-9.87-5.49-9.94,5.49,1.88-11.56L0,12.2l11.06-1.69L16.04,0l4.9,10.51,11.06,1.69-7.98,8.23,1.88,11.56ZM2.04,12.89l6.97,7.2-1.64,10.06,8.66-4.78,8.59,4.78-1.64-10.06,6.97-7.19-9.67-1.48-4.26-9.14-4.32,9.13-9.67,1.48Z"/>\ </svg>');
	--foreground-outline: var(--primary-color,gray)
}

[class*="five-rate-"] {
	display: inline-flex;
	flex: none;
	flex-flow: row;
	text-align: center;
	margin: auto;
	white-space: nowrap
}

[class*="rate-value"] {
	width: var(--size-medium);
	height: var(--size-medium);
	font-size: var(--font-size,1rem);
	position: relative;
	margin: 0 !important
}

[class*="rate-value"]:before,[class*="rate-value"]:after {
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	position: absolute;
	content: '';
	inset: 0
}

[class*="rate-value"]:before {
	background-color: var(--foreground-outline);
	-webkit-mask-image: var(--rating-mask-empty);
	mask-image: var(--rating-mask-empty)
}

[class*="five-rate-"].larger [class*="rate-value"] {
	width: var(--size-large);
	height: var(--size-large)
}

[class*="five-rate-"].smaller [class*="rate-value"] {
	width: var(--size-small);
	height: var(--size-small)
}

.rate-value-half:before {
	-webkit-mask-image: var(--rating-mask-half);
	mask-image: var(--rating-mask-half);
	background-color: var(--yellow,orange)
}

.rate-value-half:after {
	-webkit-mask-image: var(--rating-mask-empty);
	mask-image: var(--rating-mask-empty);
	background-color: var(--foreground-outline)
}

@media(prefers-color-scheme: dark) {
	.rate-value-half:before {
		z-index:1
	}

	.rate-value-half:after {
		z-index: 0
	}
}

.rate-value-full:before {
	-webkit-mask-image: var(--rating-mask-full);
	mask-image: var(--rating-mask-full);
	background-color: var(--yellow,orange)
}
@media(min-width: 64rem) {
	[class*="five-rate-"],.rating-scale {
		--size-small:1rem;
		--size-medium: 1.5rem;
		--size-large: 2rem
	}
}
@media(max-width: 63.9375rem) {
	[class*="five-rate-"],.rating-scale {
		--size-small:1rem;
		--size-medium: 1.5rem;
		--size-large: 2rem
	}
}