/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 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.
 */
.ouiFormRow {
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  max-width: $ouiFormMaxWidth;

  + .ouiFormRow,
  + .ouiButton {
    margin-top: $ouiSize;
  }
}

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

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

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

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

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

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

  .ouiFormRow__fieldWrapper {
    width: 67%;
  }

  + .ouiFormRow--horizontal {
    margin-top: $ouiSizeS;
  }

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

  &.ouiFormRow--hasSwitch {
    .ouiFormRow__labelWrapper {
      line-height: $ouiSwitchHeight - 1px; // The 1px less helps the alignment of the text baseline
      width: auto;
      min-width: calc(33% - #{$ouiSizeS});
    }

    .ouiFormRow__fieldWrapper {
      width: auto;

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

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

.ouiFormRow__fieldWrapperDisplayOnly {
  min-height: $ouiFormControlHeight;
  display: flex;
  align-items: center;
}

.ouiFormRow--compressed {
  &.ouiFormRow--hasEmptyLabelSpace {
    min-height: $ouiFormControlCompressedHeight;
  }

  .ouiFormRow__fieldWrapperDisplayOnly {
    min-height: $ouiFormControlCompressedHeight;
  }
}