_combo_box.scss

// TODO: Address nesting during Emotion conversion, if possible
// stylelint-disable max-nesting-depth

.euiComboBox {
  @include euiFormControlSize(auto, $includeAlternates: true);
  position: relative;

  /**
   * 1. Allow pills to truncate their text with an ellipsis.
   * 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button.
   * 3. The height on combo can be larger than normal text inputs.
   */

  &--compressed,
  .euiFormControlLayout {
    height: auto;
  }

  .euiComboBox__inputWrap {
    @include euiFormControlStyle($includeStates: false, $includeSizes: true);
    @include euiFormControlWithIcon($isIconOptional: true);
    @include euiFormControlSize(auto, $includeAlternates: true);
    padding: $euiSizeXS $euiSizeS;
    display: flex; /* 1 */
    outline: none; // Fixes an intermittent focus ring in Firefox

    // to override the padding added above
    @include euiFormControlLayoutPadding(1); /* 2 */

    .euiComboBoxPill {
      $inputMinWidth: $euiSize;

      // Ensure the input doesn't drop to the next line when the EuiBadge has a very long text
      // Overrides the default EuiBadge max-width that is 100%
      max-width: calc(100% - #{$euiSizeXS * .5} - #{$inputMinWidth});
    }

    &:not(.euiComboBox__inputWrap--noWrap) {
      padding-top: $euiSizeXS;
      padding-bottom: $euiSizeXS;
      padding-left: $euiSizeXS;
      height: auto;  /* 3 */
      flex-wrap: wrap; /* 1 */
      align-content: flex-start;

      &:hover {
        cursor: text;
      }
    }

    &.euiComboBox__inputWrap-isClearable {
      @include euiFormControlLayoutPadding(2); /* 2 */
    }

    &.euiComboBox__inputWrap-isLoading {
      @include euiFormControlLayoutPadding(2); /* 2 */

      .euiComboBoxPlaceholder {
        @include euiFormControlLayoutPadding(2); /* 2 */
      }
    }

    &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable {
      @include euiFormControlLayoutPadding(3); /* 2 */
    }
  }

  /**
   * 1. Force field height to match other field heights.
   * 2. Force input height to expand to fill this element.
   * 3. Reset appearance on Safari.
   * 4. Fix react-input-autosize appearance.
   * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
   */
  .euiComboBox__input {
    // stylelint-disable-next-line declaration-no-important
    display: inline-flex !important; /* 1 */
    height: $euiSizeXL; /* 2 */
    overflow: hidden; /* 5 */

    > input {
      @include euiFont;
      appearance: none; /* 3 */
      padding: 0;
      border: none;
      background: transparent;
      font-size: $euiFontSizeS;
      color: $euiTextColor;
      margin: $euiSizeXS;
      line-height: $euiLineHeight; /* 4 */
    }
  }

  &.euiComboBox-isOpen {
    .euiComboBox__inputWrap {
      @include euiFormControlFocusStyle;

      &--compressed {
        @include euiFormControlFocusStyle($borderOnly: true);
      }
    }
  }

  &.euiComboBox-isInvalid {
    .euiComboBox__inputWrap {
      @include euiFormControlInvalidStyle;
    }
  }

  &.euiComboBox-isDisabled {
    .euiComboBox__inputWrap {
      // stylelint-disable property-no-vendor-prefix
      @include euiFormControlDisabledStyle;
      -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
    }

    .euiComboBoxPlaceholder,
    .euiComboBoxPill--plainText {
      @include euiFormControlDisabledTextStyle;
    }

    // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
      cursor: not-allowed;
    }
  }

  &.euiComboBox--compressed {
    .euiComboBox__inputWrap {
      line-height: $euiFormControlCompressedHeight; /* 2 */
      padding-top: 0;
      padding-bottom: 0;

      @include euiFormControlLayoutPadding(1, $compressed: true); /* 2 */

      &.euiComboBox__inputWrap-isClearable {
        @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */
      }

      &.euiComboBox__inputWrap-isLoading {
        @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */

        .euiComboBoxPlaceholder {
          @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */
        }
      }

      &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable {
        @include euiFormControlLayoutPadding(3, $compressed: true); /* 2 */
      }
    }
  }

  // Overrides the euiFormControlLayout prepend and append height that is 100%
  .euiFormControlLayout__prepend,
  .euiFormControlLayout__append {
    // stylelint-disable-next-line declaration-no-important
    height: auto !important;
  }
}