.kaoto-form {
  --pf-v6-c-form__field-group-body--PaddingBlockStart: 0;

  &__label {
    --pf-v6-c-form__label--FontSize: --pf-t--global--font--size--body--md;
    --pf-v6-c-form__label-required--FontSize: --pf-t--global--font--size--body--lg;

    text-transform: capitalize;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .pf-v6-c-text-input-group__text-input::placeholder {
    font-style: italic;
  }

  & &__string-field {
    /*
     The error icon in the TextField component needs to be separated from the field
     using the pf-m-icon class. This class is used to add padding to the icon.
     Nevetheless the padding-inline-start property is set to initial to remove the
     left padding added by the pf-m-icon class.
     */
    --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 1rem;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  & &__expandable-group .pf-v6-c-form__field-group-header {
    /*
     The expandable section uses a small font size for the header. This is not
     consistent with the rest of the form. This style rule sets the font size
     to the same value as the rest of the form.
     */
    font-family: var(--pf-v6-c-card__title-text--FontFamily);
    font-size: var(--pf-v6-c-card__title-text--FontSize);
    font-weight: var(--pf-v6-c-card__title-text--FontWeight);
    line-height: var(--pf-v6-c-card__title-text--LineHeight);
    color: var(--pf-v6-c-card__title-text--Color);
  }

  & &__wrapper--row {
    flex-flow: row wrap;
    justify-content: space-between;
  }

  &__suggestions-button {
    display: none;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .pf-v6-c-text-input-group:hover &__suggestions-button,
  /* stylelint-disable-next-line selector-class-pattern */
  .pf-v6-c-text-input-group:focus-within &__suggestions-button,
  /* stylelint-disable-next-line selector-class-pattern */
  .pf-v6-c-input-group:hover &__suggestions-button,
  /* stylelint-disable-next-line selector-class-pattern */
  .pf-v6-c-input-group:focus-within &__suggestions-button,
  &__suggestions-button:focus {
    display: inline-flex;
  }

  &__empty {
    display: none;
  }

  &:empty + &__empty {
    display: block;
  }
}