.c-form-star-rating__stars {
position: relative;
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 2px;
padding: .5rem 0;
}
.c-form-star-rating__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.c-form-star-rating__star {
--color-stars: #ffe200;
width: 24px;
height: 24px;
background: grey;
cursor: pointer;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/*
* DOM order is 5..1 and the flex direction is reversed, so a sibling
* selector fills every star up to the hovered or selected one.
*/
.c-form-star-rating__stars:not(:hover) .c-form-star-rating__input:checked ~ .c-form-star-rating__star,
.c-form-star-rating__stars .c-form-star-rating__star:hover,
.c-form-star-rating__stars .c-form-star-rating__star:hover ~ .c-form-star-rating__star {
background: var(--color-stars);
}
.c-form-star-rating__input:focus-visible + .c-form-star-rating__star {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.c-form-star-rating__text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}