.stars-rate {
	$self: &;
	position: relative;
	width: 100px;
	height: 20px;

	@include desktop {
		width: 120px;
		height: 24px;
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background-size: 20px;

		@include desktop {
			background-size: 24px;
		}
	}

	&::before {
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99996 1.66675L12.596 6.42692L17.9254 7.42494L14.2005 11.3649L14.8982 16.7419L9.99996 14.4167L5.10175 16.7419L5.79946 11.3649L2.07449 7.42494L7.40391 6.42692L9.99996 1.66675Z' fill='%23F9DAA1'/%3E%3C/svg%3E");
	}

	&::after {
		right: calc(20px * (5 - var(--rate)));
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99996 1.66675L12.596 6.42692L17.9254 7.42494L14.2005 11.3649L14.8982 16.7419L9.99996 14.4167L5.10175 16.7419L5.79946 11.3649L2.07449 7.42494L7.40391 6.42692L9.99996 1.66675Z' fill='%23FF9E00'/%3E%3C/svg%3E");
	}

	&--small {
		width: 100px;
		height: 20px;

		&::before,
		&::after {
			background-size: 20px;
		}
	}

	&--big {
		width: 160px;
		height: 32px;

		&::before,
		&::after {
			background-size: 32px;
		}

		&::after {
			right: calc(32px * (5 - var(--rate)));
		}
	}

	&--interactive {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		cursor: pointer;
	}
}

.stars-rate__button {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}