.rating-form {
    width: 100%;
    height: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating {
    position: relative;
    border: none;
}

.star {
    display: none;
}

.rating > label::before {
    content: "\f005";
    font-family: FontAwesome;
    font-size: var(--h1-font-size);
    margin: var(--sp-0-5);

    display: inline-block;
    cursor: pointer;
}

.rating > .half::before {
    content: "\f089";
    position: absolute;
    cursor: pointer;
}

.rating > label {
    float: right;
    color: var(--text-color-light);
    cursor: pointer;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: var(--star-color);
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
    color: var(--star-color);
}