.c-star {
	padding: 0 2px;
	color: palette(neutral, 200);
	line-height: 0;
}

.c-star--full {
	color: palette(primary, 500);
}

.c-star--half {
	.half-star {
		fill: palette(primary, 500);
	}
}

/**
 * When we need an animation we can use the following as a basis
 */

//.c-star {
//	transform-origin: 5px -20px;
//	animation: star-appear .5s normal forwards cubic-bezier(0.43, 0.35, 0.29, 1.23);
//
//	$star-cue-delay: 0.1;
//	@for $i from 2 through 5 {
//		&:nth-of-type(#{$i}) {
//			animation-delay: #{($i - 1) * $star-cue-delay}s;
//		}
//	}
//}

//@keyframes star-appear {
//	from {
//		opacity: 0;
//		transform: scale(0, 0) rotate(-90deg);
//	}
//	to {
//		opacity: 1;
//		transform: scale(1, 1) rotate(0deg);
//	}
//}