/**
 * 1. Coerce inline form elements to behave as block-level elements.
 * 2. For inline forms, we need to add margin if the label doesn't exist.
 */
.euiFormRow {
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  max-width: $euiFormMaxWidth;

  + .euiFormRow,
  + .euiButton {
    margin-top: $euiSize;
  }
}

.euiFormRow--fullWidth {
  max-width: 100%;
}

.euiFormRow--hasEmptyLabelSpace {
  margin-top: ($euiFontSizeXS * $euiLineHeight) + $euiSizeXS; /* 2 */
  // the following ensure that contents that aren't inherently the same height
  // as inputs will align to the vertical center
  min-height: $euiFormControlHeight;
  padding-bottom: 0;
  justify-content: center;
}

.euiFormRow__labelWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: $euiSizeXS;
}

.euiFormRow--horizontal {
  flex-direction: row;
  align-items: stretch;

  .euiFormRow__label {
    @include euiTextBreakWord;
    hyphens: auto;
    max-width: 100%; // Fixes IE
  }

  .euiFormRow__labelWrapper {
    display: block;
    line-height: $euiFormControlCompressedHeight - 1px; // The 1px less helps the alignment of the text baseline
    width: calc(33% - #{$euiSizeS});
    margin-right: $euiSizeS;
    margin-bottom: 0;
  }

  .euiFormRow__fieldWrapper {
    width: 67%;
  }

  + .euiFormRow--horizontal {
    margin-top: $euiSizeS;
  }

  + .euiFormRow--horizontal.euiFormRow--hasSwitch {
    margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
  }

  &.euiFormRow--hasSwitch {
    .euiFormRow__labelWrapper {
      line-height: $euiSwitchHeight - 1px; // The 1px less helps the alignment of the text baseline
      width: auto;
      min-width: calc(33% - #{$euiSizeS});
    }

    .euiFormRow__fieldWrapper {
      width: auto;

      .euiSwitch--compressed {
        margin-top: $euiSizeXS / 2; // Better vertical alignment of a compressed switch to the horizontal label
      }
    }

    + .euiFormRow--horizontal {
      margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
    }
  }
}

.euiFormRow__fieldWrapperDisplayOnly {
  min-height: $euiFormControlHeight;
  display: flex;
  align-items: center;
}

.euiFormRow--compressed {
  &.euiFormRow--hasEmptyLabelSpace {
    min-height: $euiFormControlCompressedHeight;
  }

  .euiFormRow__fieldWrapperDisplayOnly {
    min-height: $euiFormControlCompressedHeight;
  }
}