/** Stars
 ******************************************************************************/

.stars {
    white-space: nowrap;
}

.stars .no-rating {
    font-style: italic;
}

/** Stars in a review form
 *
 * Specificity makes hovering taking over checked inputs.
 *
 * \e9d9: filled star
 * \e9d7: empty star;
 * -------------------------------------------------------------------------- */

.form-rate-stars {
    width: max-content;
}

/* All stars are visually filled by default. */
.form-rate-stars .icon::before {
    content: "\e9d9"; /* icon-star-full */
}

/* Icons directly following half star inputs are marked as half */
.form-rate-stars input.half:checked ~ .icon::before {
    content: "\e9d8"; /* icon-star-half */
}

/* stylelint-disable no-descending-specificity */
.form-rate-stars input.half:checked + input + .icon:hover::before {
    content: "\e9d8" !important; /* icon-star-half */
}

/* Icons directly following half check inputs that follow the checked input are emptied. */
.form-rate-stars input.half:checked + input + .icon ~ .icon::before {
    content: "\e9d7"; /* icon-star-empty */
}

/* Icons directly following inputs that follow the checked input are emptied. */
.form-rate-stars input:checked ~ input + .icon::before {
    content: "\e9d7"; /* icon-star-empty */
}

/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */
.form-rate-stars:hover .icon.icon::before {
    content: "\e9d9" !important; /* icon-star-full */
}

.form-rate-stars .icon:hover ~ .icon::before {
    content: "\e9d7" !important; /* icon-star-empty */
}
