Better Style for Gravity Forms Survey Rating Field

/* Style Gravity Forms Survey Rating Field */
:root { --gsurvey-star-size: 42px; }

body .gform_wrapper .gsurvey-rating:not(:checked) > label {
   width: var(--gsurvey-star-size);
   font-size: var(--gsurvey-star-size)!important;
   line-height: var(--gsurvey-star-size);
   color: #ddd;
   background-image: none;
   background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
}
body .gform_wrapper .gsurvey-rating:not(:checked) > label::before {
   content: '☆';
}
body .gform_wrapper .gsurvey-rating > input:checked ~ label {
   background-image: none;
   background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
}
body .gform_wrapper .gsurvey-rating > input:checked ~ label::before {
   content: '★';
}
body .gform_wrapper .gsurvey-rating:not(:checked) > label:hover,
body .gform_wrapper .gsurvey-rating:not(:checked) > label:hover ~ label {
   background-image: none;
   background-size: var(--gsurvey-star-size) var(--gsurvey-star-size);
}

#