$pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");

@mixin pf-c-form--m-horizontal {
  // default horizontal styles applied at medium breakpoint
  @media screen and (min-width: $pf-global--breakpoint--md) {
    @content;
  }

  // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
  &-on-xs {
    @media screen and (min-width: $pf-global--breakpoint--xs) {
      @content;
    }
  }

  // loop to build the rest of the breakpoints
  @each $breakpoint, $breakpoint-value in $pf-c-form--m-horizontal--breakpoint-map {
    &-on-#{$breakpoint} {
      @include pf-apply-breakpoint($breakpoint) {
        @content;
      }
    }
  }
}

.pf-c-form {
  --pf-c-form--GridGap: var(--pf-global--gutter--md);

  // Group
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: #{pf-size-prem(150px)};
  --pf-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-global--spacer--md);
  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;

  // limit width
  --pf-c-form--m-limit-width--MaxWidth: #{pf-size-prem(880px)};

  // Group label

  // Terminology and a note on vertical alignment of the group labels:
  // Content area height = Font size
  // Line Box height = Content area * Line Height
  // Leading = Line Box - Content Area
  // Leading is always split evenly above and below the content area (so the content area always sits vertically centered in the line box)

  // So, to align the label's baseline with the text input's baseline, we need to calculate the difference between the (content area + top half of leading) of the label and of the control. We'll use the text input as the default control, and we also need to adjust for the border of the text input.

  // Calculate the distance from top to baseline by (((font size * line height) + border widths - font size) / 2) + font size
  // group__form-label distance from top to baseline (small font, small line height) is 16.1px
  // group__form-control text input distance from top to baseline (medium font, medium line height) is 21px
  // plus the border width used by the text inputs is 1px
  // So we need to adjust by 21 - 16.1 + 1 = 5.9px

  --pf-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)) + (2 * var(--pf-global--BorderWidth--sm))) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)) - ((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) + var(--pf-global--BorderWidth--sm));
  --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--sm);

  // Use the no-padding modifier to align form groups that aren't text inputs
  // Use the formula above, except
  // - no adjustment for borders needed
  // - reverse the subtraction so we get a negative number to translate by
  // - controls like checkboxes use the medium font and small line height
  // - This comes out to a difference of 2.3px.
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
  --pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--sm)) / 2) + var(--pf-global--FontSize--sm)) - ((((var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--sm)) - var(--pf-global--FontSize--md)) / 2) + var(--pf-global--FontSize--md)));

  // Label
  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
  --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
  --pf-c-form__label--hover--Cursor: pointer;
  --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;

  // Label text
  --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);

  // Required labels
  --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
  --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-form__label-required--Color: var(--pf-global--danger-color--100);

  // Field level help
  --pf-c-form__group-label-help--PaddingTop: var(--pf-global--spacer--xs);
  --pf-c-form__group-label-help--PaddingRight: var(--pf-global--spacer--xs);
  --pf-c-form__group-label-help--PaddingBottom: var(--pf-global--spacer--xs);
  --pf-c-form__group-label-help--PaddingLeft: var(--pf-global--spacer--xs);
  --pf-c-form__group-label-help--MarginTop: calc(var(--pf-c-form__group-label-help--PaddingTop) * -1);
  --pf-c-form__group-label-help--MarginRight: calc(var(--pf-c-form__group-label-help--PaddingRight) * -1);
  --pf-c-form__group-label-help--MarginBottom: calc(var(--pf-c-form__group-label-help--PaddingBottom) * -1);
  --pf-c-form__group-label-help--MarginLeft: calc(var(--pf-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-global--spacer--xs));
  --pf-c-form__group-label-help--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-form__group-label-help--TranslateY: #{pf-size-prem(2px)};
  --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);
  --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);
  --pf-c-form__group-label-help--focus--Color: var(--pf-global--Color--100);

  // Form group label info
  --pf-c-form__group-label-info--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-form__group-label-info--FontSize: var(--pf-global--FontSize--sm);

  // Group control
  --pf-c-form__group-control--m-inline--child--MarginRight: var(--pf-global--spacer--lg);
  --pf-c-form__group-control__helper-text--MarginBottom: var(--pf-global--spacer--xs);
  --pf-c-grid__group-control--m-stack--Gap: var(--pf-global--spacer--sm);
  --pf-c-grid__group-control--m-stack__helper-text--MarginTop: calc(var(--pf-c-grid__group-control--m-stack--Gap) * -1 + var(--pf-c-form__helper-text--MarginTop--base));

  // Actions
  --pf-c-form__actions--child--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-form__actions--child--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-form__actions--child--MarginBottom: var(--pf-global--spacer--sm);
  --pf-c-form__actions--child--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-form__actions--MarginTop: calc(var(--pf-c-form__actions--child--MarginTop) * -1);
  --pf-c-form__actions--MarginRight: calc(var(--pf-c-form__actions--child--MarginRight) * -1);
  --pf-c-form__actions--MarginBottom: calc(var(--pf-c-form__actions--child--MarginBottom) * -1);
  --pf-c-form__actions--MarginLeft: calc(var(--pf-c-form__actions--child--MarginLeft) * -1);

  // Helper text
  --pf-c-form__helper-text--MarginTop--base: var(--pf-global--spacer--xs);
  --pf-c-form__helper-text--MarginTop: var(--pf-c-form__helper-text--MarginTop--base);
  --pf-c-form__helper-text--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-form__helper-text--Color: var(--pf-global--Color--100);

  // here
  // Helper text icon
  --pf-c-form__helper-text-icon--FontSize: var(--pf-global--FontSize--md);
  --pf-c-form__helper-text-icon--MarginRight: var(--pf-global--spacer--xs);

  // States
  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--200);
  --pf-c-form__helper-text--m-warning--Color: var(--pf-global--warning-color--200);
  --pf-c-form__helper-text--m-error--Color: var(--pf-global--danger-color--100);

  // Section
  --pf-c-form__section--MarginTop: var(--pf-global--spacer--xl);
  --pf-c-form__section--Gap: var(--pf-global--gutter--md);

  // Section title
  --pf-c-form__section-title--FontSize: var(--pf-global--FontSize--lg);
  --pf-c-form__section-title--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-form__section-title--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);

  // Field groups
  --pf-c-form__field-group--border-width-base: var(--pf-global--BorderWidth--sm);
  --pf-c-form__field-group--BorderTopWidth: var(--pf-c-form__field-group--border-width-base);
  --pf-c-form__field-group--BorderTopColor: var(--pf-global--BorderColor--100);
  --pf-c-form__field-group--BorderBottomWidth: var(--pf-c-form__field-group--border-width-base);
  --pf-c-form__field-group--BorderBottomColor: var(--pf-global--BorderColor--100);
  --pf-c-form__field-group--field-group--MarginTop: calc(var(--pf-c-form--GridGap) * -1);
  --pf-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-form__field-group-toggle-icon--MinWidth) + var(--pf-global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
  --pf-c-form__field-group-toggle--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-form__field-group-toggle--PaddingRight: var(--pf-global--spacer--xs);
  --pf-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-global--BorderWidth--sm);
  --pf-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-c-form__field-group-header-toggle--BorderWidth--base);
  --pf-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-form__field-group-toggle-icon--Transition: var(--pf-global--Transition);
  --pf-c-form__field-group-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
  --pf-c-form__field-group-toggle-icon--Rotate: 0;
  --pf-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
  --pf-c-form__field-group-header--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-form__field-group-header--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-form__field-group-header--GridColumn: 1 / 3;
  --pf-c-form__field-group__field-group__field-group-header--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-form__field-group__field-group__field-group-header--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3;
  --pf-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--pf-c-form__field-group-header-toggle--BorderWidth--base);
  --pf-c-form__field-group-header-description--MarginTop: var(--pf-global--spacer--xs);
  --pf-c-form__field-group-header-description--Color: var(--pf-global--Color--200);
  --pf-c-form__field-group-header-actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-form__field-group-header-actions--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-form__field-group-body--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-form__field-group-body--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-form__field-group-body--Gap: var(--pf-c-form--GridGap);
  --pf-c-form__field-group-body--GridColumn: 2 / 3;
  --pf-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
  --pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
  --pf-c-form__field-group-body__field-group--last-child--MarginBottom: calc(var(--pf-c-form__field-group-body--PaddingBottom) * -1);

  display: grid;
  gap: var(--pf-c-form--GridGap);

  &.pf-m-horizontal {
    &.pf-m-align-right {
      .pf-c-form__label {
        text-align: right;
      }
    }

    @include pf-c-form--m-horizontal {
      --pf-c-form__group-label--PaddingBottom: 0;

      .pf-c-form__group {
        display: grid;
        grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
        grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
      }

      .pf-c-form__group-label {
        padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);

        // stylelint-disable-next-line
        &.pf-m-no-padding-top {
          --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);

          transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
        }
      }

      .pf-c-form__group-control {
        grid-column: 2;
      }
    }
  }

  &.pf-m-limit-width {
    max-width: var(--pf-c-form--m-limit-width--MaxWidth);
  }
}

.pf-c-form__group {
  &.pf-m-action {
    margin-top: var(--pf-c-form__group--m-action--MarginTop);
    overflow: hidden; // keeps the negative bottom margin bottom on .pf-c-form__actions from triggering overflow
  }
}

.pf-c-form__section {
  display: grid;
  gap: var(--pf-c-form__section--Gap);

  & + .pf-c-form__group:not(.pf-m-action),
  &:not(:first-child) {
    margin-top: var(--pf-c-form__section--MarginTop);
  }
}

.pf-c-form__section-title {
  margin-bottom: var(--pf-c-form__section-title--MarginBottom);
  font-size: var(--pf-c-form__section-title--FontSize);
  font-weight: var(--pf-c-form__section-title--FontWeight);
}

.pf-c-form__group-label {
  --pf-c-form__helper-text--MarginTop: 0;

  padding-bottom: var(--pf-c-form__group-label--PaddingBottom);

  &.pf-m-info {
    display: flex;
    align-items: flex-end;
  }
}

.pf-c-form__group-label-main {
  flex-grow: 1;
}

.pf-c-form__group-label-info {
  margin-left: var(--pf-c-form__group-label-info--MarginLeft);
  font-size: var(--pf-c-form__group-label-info--FontSize);
}

.pf-c-form__label {
  font-size: var(--pf-c-form__label--FontSize);
  line-height: var(--pf-c-form__label--LineHeight);

  &::selection {
    background-color: none;
  }

  &:not(.pf-m-disabled):hover {
    cursor: var(--pf-c-form__label--hover--Cursor);
  }

  &.pf-m-disabled {
    color: var(--pf-c-form__label--m-disabled--Color);
  }

  &.pf-m-disabled:hover {
    cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
  }
}

.pf-c-form__label-text {
  font-weight: var(--pf-c-form__label-text--FontWeight);
}

.pf-c-form__label-required {
  margin-left: var(--pf-c-form__label-required--MarginLeft);
  font-size: var(--pf-c-form__label-required--FontSize);
  color: var(--pf-c-form__label-required--Color);
}

.pf-c-form__group-label-help {
  padding-top: var(--pf-c-form__group-label-help--PaddingTop);
  padding-right: var(--pf-c-form__group-label-help--PaddingRight);
  padding-bottom: var(--pf-c-form__group-label-help--PaddingBottom);
  padding-left: var(--pf-c-form__group-label-help--PaddingLeft);
  margin-top: var(--pf-c-form__group-label-help--MarginTop);
  margin-right: var(--pf-c-form__group-label-help--MarginRight);
  margin-bottom: var(--pf-c-form__group-label-help--MarginBottom);
  margin-left: var(--pf-c-form__group-label-help--MarginLeft);
  font-size: var(--pf-c-form__group-label-help--FontSize);
  line-height: 1;
  color: var(--pf-c-form__group-label-help--Color);
  border: 0;
  transform: translateY(var(--pf-c-form__group-label-help--TranslateY));

  &:hover {
    --pf-c-form__group-label-help--Color: var(--pf-c-form__group-label-help--hover--Color);
  }

  &:focus-within {
    --pf-c-form__group-label-help--Color: var(--pf-c-form__group-label-help--focus--Color);
  }
}


.pf-c-form__group-control {
  &.pf-m-inline {
    display: flex;
    flex-flow: row wrap;

    > * {
      margin-right: var(--pf-c-form__group-control--m-inline--child--MarginRight);
    }

    > :last-child {
      --pf-c-form__group-control--m-inline--child--MarginRight: 0;
    }
  }

  &.pf-m-stack {
    display: grid;
    gap: var(--pf-c-grid__group-control--m-stack--Gap);

    --pf-c-form__helper-text--MarginTop: var(--pf-c-grid__group-control--m-stack__helper-text--MarginTop);
  }

  .pf-c-form__helper-text:first-child {
    --pf-c-form__helper-text--MarginTop: 0;

    margin-bottom: var(--pf-c-form__group-control__helper-text--MarginBottom);
  }
}

.pf-c-form__helper-text {
  margin-top: var(--pf-c-form__helper-text--MarginTop);
  font-size: var(--pf-c-form__helper-text--FontSize);
  color: var(--pf-c-form__helper-text--Color);

  &.pf-m-error {
    --pf-c-form__helper-text--Color: var(--pf-c-form__helper-text--m-error--Color);
  }

  &.pf-m-success {
    --pf-c-form__helper-text--Color: var(--pf-c-form__helper-text--m-success--Color);
  }

  &.pf-m-warning {
    --pf-c-form__helper-text--Color: var(--pf-c-form__helper-text--m-warning--Color);
  }

  &.pf-m-inactive {
    display: none;
    visibility: hidden;
  }

  &.pf-m-hidden {
    visibility: hidden;
    opacity: 0;
  }
}

.pf-c-form__helper-text-icon {
  margin-right: var(--pf-c-form__helper-text-icon--MarginRight);
  font-size: var(--pf-c-form__helper-text-icon--FontSize);
}

// Fieldset
.pf-c-form__fieldset {
  border: 0;
}

.pf-c-form__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--pf-c-form__actions--MarginTop);
  margin-right: var(--pf-c-form__actions--MarginRight);
  margin-bottom: var(--pf-c-form__actions--MarginBottom);
  margin-left: var(--pf-c-form__actions--MarginLeft);

  > * {
    margin-top: var(--pf-c-form__actions--child--MarginTop);
    margin-right: var(--pf-c-form__actions--child--MarginRight);
    margin-bottom: var(--pf-c-form__actions--child--MarginBottom);
    margin-left: var(--pf-c-form__actions--child--MarginLeft);
  }
}

.pf-c-form__field-group {
  --pf-c-form__field-group--BorderTopWidth: var(--pf-c-form__field-group--border-width-base);

  display: grid;
  grid-template-columns: minmax(var(--pf-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
  border-top: var(--pf-c-form__field-group--BorderTopWidth) solid var(--pf-c-form__field-group--BorderTopColor);
  border-bottom: var(--pf-c-form__field-group--BorderBottomWidth) solid var(--pf-c-form__field-group--BorderBottomColor);

  &:last-child {
    --pf-c-form__field-group--BorderBottomWidth: 0;
  }

  & + &,
  &:first-child {
    --pf-c-form__field-group--BorderTopWidth: 0;
  }

  & + & {
    margin-top: var(--pf-c-form__field-group--field-group--MarginTop);
  }

  // nested
  & & {
    --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-body--GridColumn);
    --pf-c-form__field-group-toggle--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-toggle--PaddingTop);
    --pf-c-form__field-group-header--PaddingTop: var(--pf-c-form__field-group__field-group__field-group-header--PaddingTop);
    --pf-c-form__field-group-header--PaddingBottom: var(--pf-c-form__field-group__field-group__field-group-header--PaddingBottom);
    --pf-c-form__field-group-body--PaddingTop: 0;

    .pf-c-form__field-group-toggle ~ .pf-c-form__field-group-body {
      --pf-c-form__field-group-body--GridColumn: var(--pf-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
    }
  }

  &.pf-m-expanded {
    > .pf-c-form__field-group-toggle {
      --pf-c-form__field-group-toggle-icon--Rotate: var(--pf-c-form__field-group--m-expanded__toggle-icon--Rotate);
    }
  }
}

.pf-c-form__field-group-toggle {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding-top: var(--pf-c-form__field-group-toggle--PaddingTop);
  padding-right: var(--pf-c-form__field-group-toggle--PaddingRight);

  + .pf-c-form__field-group-header {
    --pf-c-form__field-group-header--GridColumn: var(--pf-c-form__field-group-toggle--field-group-header--GridColumn);
  }
}

.pf-c-form__field-group-toggle-button {
  margin-top: var(--pf-c-form__field-group-toggle-button--MarginTop);
  margin-bottom: var(--pf-c-form__field-group-toggle-button--MarginBottom);
}

.pf-c-form__field-group-toggle-icon {
  display: inline-block;
  min-width: var(--pf-c-form__field-group-toggle-icon--MinWidth);
  text-align: center;
  transition: var(--pf-c-form__field-group-toggle-icon--Transition);
  transform: rotate(var(--pf-c-form__field-group-toggle-icon--Rotate));
}

.pf-c-form__field-group-header {
  grid-column: var(--pf-c-form__field-group-header--GridColumn);
  grid-row: 1 / 2;
  display: flex;
  align-items: flex-start;
  padding-top: var(--pf-c-form__field-group-header--PaddingTop);
  padding-bottom: var(--pf-c-form__field-group-header--PaddingBottom);
}

.pf-c-form__field-group-header-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pf-c-form__field-group-header-title {
  display: flex;
}

.pf-c-form__field-group-header-title-text {
  flex-grow: 1;
}

.pf-c-form__field-group-header-description {
  margin-top: var(--pf-c-form__field-group-header-description--MarginTop);
  color: var(--pf-c-form__field-group-header-description--Color);
}

.pf-c-form__field-group-header-actions {
  margin-top: var(--pf-c-form__field-group-header-actions--MarginTop);
  margin-bottom: var(--pf-c-form__field-group-header-actions--MarginBottom);
  margin-left: var(--pf-c-form__field-group-header-actions--MarginLeft);
  white-space: nowrap;
}

.pf-c-form__field-group-body {
  grid-column: var(--pf-c-form__field-group-body--GridColumn);
  display: grid;
  gap: var(--pf-c-form__field-group-body--Gap);
  padding-top: var(--pf-c-form__field-group-body--PaddingTop);
  padding-bottom: var(--pf-c-form__field-group-body--PaddingBottom);

  > .pf-c-form__field-group {
    &:first-child {
      --pf-c-form__field-group-toggle--PaddingTop: 0;
      --pf-c-form__field-group-header--PaddingTop: 0;
    }

    &:last-child {
      margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
    }
  }
}