.gfield--type-classic-rating {
  legend.gfield_label {
    @apply pb-6 !text-2xl text-center;
  }
  .gfield_radio {
    @apply grid grid-cols-2 sm:flex justify-between max-w-lg text-center mx-auto items-start;
    @apply gap-0  sm:gap-4 md:gap-6;

    @media screen and (max-width: 400px) {
      grid-template-columns: auto auto;
      width: fit-content;
      column-gap: 1rem;
    }
    .gchoice {
      @apply flex flex-col justify-center items-center;
      &:last-child {
        grid-column: auto / span 2;
      }

      label.gform-field-label {
        @apply !ml-0 mt-3 !font-normal;
      }
      input.gfield-choice-input {
        @apply rounded-none border-none;
        @apply w-16 md:w-20 h-12 bg-no-repeat bg-center bg-contain cursor-pointer py-4 rounded-2xl bg-transparent box-content;

        box-shadow: none;
        filter: grayscale(100%) opacity(0.5);
        transition: all 0.3s ease-in-out;
        display: block;
        background-image: url('../resources/img/graphic-assets/star.svg');
        background-size: 70%;
        &:after {
          content: '';
          @apply pointer-events-none flex justify-center items-center relative inset-1/2;
          transform: translate(-50%, -50%);
          @apply w-12 h-12;
        }

        &[value='1']:after {
          content: '1';
        }
        &[value='2']:after {
          content: '2';
        }
        &[value='3']:after {
          content: '3';
        }

        &[value='4']:after {
          content: '4';
        }
        &[value='5']:after {
          content: '5';
        }
        &:checked,
        &:focus-visible,
        &:hover {
          /* @apply ring ring-2 ring-secondary; */
          transform: scale(1.15);
          filter: grayscale(0%) opacity(1);
          @apply !outline-secondary outline-1;
          outline-opacity: 50% !important;
        }
        &:hover,
        &:focus-visible {
          @apply !outline-secondary outline-1;
          outline-opacity: 50% !important;
        }
      }

      &:has(input.gfield-choice-input:checked) {
        label.gform-field-label {
          @apply !text-secondary !font-bold;
        }
      }
    }
  }

  .gfield_radio:has(
      input.gfield-choice-input[value='5']:checked,
      input.gfield-choice-input[value='5']:hover,
      input.gfield-choice-input[value='5']:focus-visible
    ) {
    input.gfield-choice-input[value='4'],
    input.gfield-choice-input[value='3'],
    input.gfield-choice-input[value='2'],
    input.gfield-choice-input[value='1'] {
      /* @apply !bg-green-400; */
      filter: grayscale(0%) opacity(1);
    }
  }
  .gfield_radio:has(
      input.gfield-choice-input[value='4']:checked,
      input.gfield-choice-input[value='4']:hover,
      input.gfield-choice-input[value='4']:focus-visible
    ) {
    input.gfield-choice-input[value='3'],
    input.gfield-choice-input[value='2'],
    input.gfield-choice-input[value='1'] {
      /* @apply !bg-purple-400; */
      filter: grayscale(0%) opacity(1);
    }
  }
  .gfield_radio:has(
      input.gfield-choice-input[value='3']:checked,
      input.gfield-choice-input[value='3']:hover,
      input.gfield-choice-input[value='3']:focus-visible
    ) {
    input.gfield-choice-input[value='2'],
    input.gfield-choice-input[value='1'] {
      /* @apply !bg-yellow-400; */
      filter: grayscale(0%) opacity(1);
    }
  }
  .gfield_radio:has(
      input.gfield-choice-input[value='2']:checked,
      input.gfield-choice-input[value='2']:hover,
      input.gfield-choice-input[value='2']:focus-visible
    ) {
    input.gfield-choice-input[value='1'] {
      /* @apply !bg-cyan-400; */
      filter: grayscale(0%) opacity(1);
    }
  }
}

form:has(.gfield--type-satisfaction-rating):not(.metabox-location-side):not(
    .metabox-location-normal
  ):not(.metabox-location-advanced):not(.search-module__search-form)
  input[type='submit'] {
  @apply !mx-auto !text-base;
}
