/* SPDX-License-Identifier: LGPL-2.1-or-later */
@use "global-variables.scss";
@use "@patternfly/patternfly/utilities/Text/text.scss";
@use "@patternfly/patternfly/utilities/Spacing/spacing.scss";
@use "@patternfly/patternfly/utilities/Sizing/sizing.scss";
@use "@patternfly/patternfly/utilities/Flex/flex.scss";

.placeholder-text {
  color: var(--pf-t--global--text--color--placeholder);
  block-size: 2.25rem;
}

.wg-listen-port {
  inline-size: 4.75rem;
}

.dynamic-form-group {
  .pf-v6-c-empty-state {
    padding: 0;
  }

  .pf-v6-c-form__field-group-body {
    .pf-v6-c-form__group {
      display: block;
    }

    .remove-button-group {
      // Move 'Remove' button the the end of the row
      grid-column: -1;
      // Move 'Remove' button to the bottom of the line so as to align with the other form fields
      display: flex;
      flex-direction: row;
      align-items: flex-end;

      button {
        margin: var(--pf-t--global--spacer--xs);
      }
    }
  }

  // We use FormFieldGroup PF component for the nested look and for ability to add buttons to the header
  // However we want to save space and not add indent to the left so we need to override it
  .pf-v6-c-form__field-group-body {
    // Stretch content fully
    --pf-v6-c-form__field-group-body--GridColumn: 1 / -1;
    // Reduce padding at the top
    --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--xs);
  }
}