Better Style for Gravity Forms Survey Rating Field

/* Better Survey Rating Styles */
 :root {
    --gsurvey-star-size: 48px;
    --gsurvey-star-color: #3b7ca8;
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating > label {
    margin-right: .25em;
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating > label::before {
    display: inline-block;
    background-color: #ececec;
    border-radius: 50%;
    padding: .25em;
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating > label:hover::before {
    color: var(--gsurvey-star-color);
    box-shadow: inset 0px 0px 0px 3px var(--gsurvey-star-color);
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating:not(:checked) > label {
    width: calc( var(--gsurvey-star-size) + .5em + 3px );
    font-size: var(--gsurvey-star-size) !important;
    line-height: var(--gsurvey-star-size);
    background-image: none;
    background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating:not(:checked) > label::before {
    content: '☆';
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating > input:checked ~ label {
    background-image: none;
    background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating > input:checked ~ label::before {
    content: '★';
    color: var(--gsurvey-star-color);
 }
 body .gform_wrapper.gravity-theme .gsurvey-rating:not(:checked) > label:hover,
 body .gform_wrapper.gravity-theme .gsurvey-rating:not(:checked) > label:hover ~ label {
    background-image: none;
    background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
 }

#