.gform_wrapper[class] {
  --gf-form-gap-y: var(--wp--preset--spacing--md);
  --gf-form-spinner-fg-color: var(--wp--custom--color--mandy--400);
  --gf-form-spinner-bg-color: rgb(
    from var(--wp--custom--color--neutral--800) r g b / 15%
  );

  & .gf_page_steps {
    gap: 0;
  }

  & .gf_step {
    flex: 1;
    gap: 0;

    &::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: rgb(
        from var(--wp--custom--color--neutral--800) r g b / 15%
      );
      display: block;
    }
  }

  & .gf_step_number {
    font-size: var(--wp--preset--font-size--body-md);
  }

  & .gf_step_completed,
  & .gf_step_active {
    & .gf_step_number {
      --gf-local-bg-color: var(--wp--custom--color--mandy--700);
      --gf-local-border-color: var(--wp--custom--color--mandy--700);
      --gf-local-color: var(--wp--custom--color--neutral--100);

      --gf-field-pg-steps-number-bg-color-complete: var(
        --wp--custom--color--mandy--700
      );
      --gf-field-pg-steps-number-border-color-complete: var(
        --wp--custom--color--mandy--700
      );
    }
  }

  & .gf_step_pending {
    & .gf_step_number {
      --gf-local-border-color: rgb(
        from var(--wp--custom--color--neutral--800) r g b / 15%
      );
      --gf-field-pg-steps-number-border-width: 1px;
    }
  }

  & .gf_step_last {
    flex: 0;
  }

  & .gf_step_label {
    display: none;
  }
  & .gform_page_footer {
    justify-content: end;
  }

  & textarea,
  & input,
  & select {
    &:not(:disabled):where(:focus, :focus-visible) {
      outline: revert !important;
    }
  }

  & textarea,
  &
    input:is(
      [type="email"],
      [type="number"],
      [type="password"],
      [type="search"],
      [type="text"],
      [type="tel"],
      [type="url"]
    ),
  & select {
    font-size: var(--wp--preset--font-size--body-lg);
    padding: var(--wp--preset--spacing--xxs);
    border-radius: var(--wp--preset--spacing--lg);
    border: 2px solid;
    height: auto;
    line-height: 1;

    &::placeholder {
      color: rgb(from var(--wp--custom--color--neutral--800) r g b / 60%);
    }
  }

  & textarea {
    resize: none;
    field-sizing: content;
  }

  & input:is([type="checkbox"], [type="radio"]) {
    all: unset;
    box-sizing: border-box;
    border: 0;
    background-color: var(--wp--custom--color--neutral--100);
    color: var(--wp--custom--color--neutral--800);
    width: var(--wp--preset--spacing--sm);
    height: var(--wp--preset--spacing--sm);
    display: grid;
    place-items: center;

    &::before {
      all: unset;
    }

    &:not(:disabled) {
      cursor: pointer;
    }
  }

  & input:is([type="checkbox"]) {
    border-radius: 0.25rem;

    &::before {
      font-family: "Material Symbols Rounded" !important;
      font-size: var(--wp--preset--font-size--body-md);
    }

    &:checked {
      background-color: var(--wp--custom--color--neutral--800);
      color: var(--wp--custom--color--neutral--100);

      &::before {
        content: "check";
      }
    }
  }

  & input:is([type="radio"]) {
    border-radius: 999px;

    &:checked {
      border: 0.25rem solid;
    }
  }

  &
    input:is(
      [type="submit"],
      [type="button"],
      [type="reset"],
      /**
       * Gravity forms has gone over the top with button selectors resulting in
       * a 0,4,1 specificity. To get higher than this at 1,2,1 we put the id
       * #bump-specificity in the :is pseudo-class function. This element
       * doesn't need to exist but increases the specificity far higher than GF
       * and doesn't need !important on every property.
       */
      #bump-specificity
    ) {
    background-color: var(--wp--custom--color--mandy--400);
    color: var(--wp--custom--color--neutral--800);
    border: 2px solid var(--wp--custom--color--mandy--100);
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xxs);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--body-xl);
    font-weight: 600;
    padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--lg);
    border-radius: 999px;

    &:not(:disabled) {
      cursor: pointer;
    }

    &.gform_previous_button {
      background-color: rgb(
        from var(--wp--custom--color--neutral--800) r g b / 5%
      );
      color: var(--wp--custom--color--biscay--700);
      border: 2px solid var(--wp--custom--color--glacier--700);
    }

    &:focus,
    &:hover {
      background-color: var(--wp--custom--color--mandy--500);
      color: var(--wp--custom--color--neutral--100);
    }
  }
}

/* if the closest wrapper has a white background, then show the checkboxes as light grey */
.has-white-background-color
  > .gform_wrapper
  input:is([type="checkbox"], [type="radio"]) {
  background-color: var(--wp--custom--color--neutral--300);
}