.x-stars {
	--width: 80px;
	--height: 16px;
	height: var(--height);
	width: var(--width);
	background-color: #c6c6c6;
	mask-image: url('../../../modules/graphite/stars/images/star.svg');
	mask-size: var(--height);
	mask-repeat: repeat-x;

	& > div {
		background-color: #f9bd00;
		width: 0;
		height: var(--height);		
		mask-image: url('../../../modules/graphite/stars/images/star.svg');
		mask-size: var(--height);
		mask-repeat: repeat-x;
	}

	&[data-stars="3"] {
		& > div {
			width: 60%;
		}
	}

	&[data-stars="3.5"] {
		& > div {
			width: 70%;
		}
	}

	&[data-stars="4"] {
		& > div {
			width: 80%;
		}
	}

	&[data-stars="4.5"] {
		& > div {
			width: 90%;
		}
	}

	&[data-stars="5"] {
		& > div {
			width: 100%;
		}
	}
}