/*!
 * 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.
 */

.ouiComboBox {
  @include ouiFormControlSize(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,
  .ouiFormControlLayout {
    height: auto;
  }

  .ouiComboBox__inputWrap {
    @include ouiFormControlStyle($includeStates: false, $includeSizes: true);
    @include ouiFormControlWithIcon($isIconOptional: true);
    @include ouiFormControlSize(auto, $includeAlternates: true);
    padding: $ouiSizeXS $ouiSizeS;
    display: flex; /* 1 */
    outline: none; // Fixes an intermittent focus ring in Firefox

    // sass-lint:disable-block mixins-before-declarations
    // to override the padding added above
    @include ouiFormControlLayoutPadding(1); /* 2 */

    .ouiComboBoxPill {
      $inputMinWidth: $ouiSize;

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

    .ouiComboBoxIcon {
      align-self: center;
    }

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

      &:hover {
        cursor: text;
      }
    }

    &.ouiComboBox__inputWrap-isClearable {
      @include ouiFormControlLayoutPadding(2); /* 2 */
    }

    &.ouiComboBox__inputWrap-isLoading {
      @include ouiFormControlLayoutPadding(2); /* 2 */

      .ouiComboBoxPlaceholder {
        @include ouiFormControlLayoutPadding(2); /* 2 */
      }
    }

    &.ouiComboBox__inputWrap-isLoading.ouiComboBox__inputWrap-isClearable {
      @include ouiFormControlLayoutPadding(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.
   */
  .ouiComboBox__input {
    // sass-lint:disable-block no-important
    display: inline-flex !important; /* 1 */
    height: $ouiSizeXL; /* 2 */
    overflow: hidden; /* 5 */

    > input {
      @include ouiFont;
      appearance: none; /* 3 */
      padding: 0;
      border: none;
      background: transparent;
      font-size: $ouiFontSizeS;
      color: $ouiTextColor;
      margin: $ouiSizeXS;
      line-height: $ouiLineHeight; /* 4 */
    }
  }

  &.ouiComboBox-isOpen {
    .ouiComboBox__inputWrap {
      @include ouiFormControlFocusStyle;

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

  &.ouiComboBox-isInvalid {
    .ouiComboBox__inputWrap {
      @include ouiFormControlInvalidStyle;
    }
  }

  &.ouiComboBox-isDisabled {
    .ouiComboBox__inputWrap {
      // sass-lint:disable-block no-vendor-prefixes
      @include ouiFormControlDisabledStyle;
      -webkit-text-fill-color: unset; // overrides $ouiFormControlDisabledColor because the color doesn't work with multiple background colors
    }

    .ouiComboBoxPlaceholder,
    .ouiComboBoxPill--plainText {
      @include ouiFormControlDisabledTextStyle;
    }

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

  &.ouiComboBox--compressed {
    .ouiComboBox__inputWrap {
      line-height: $ouiFormControlCompressedHeight; /* 2 */
      padding-top: 0;
      padding-bottom: 0;

      // sass-lint:disable-block mixins-before-declarations
      @include ouiFormControlLayoutPadding(1, $compressed: true); /* 2 */

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

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

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

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

  // Overrides the ouiFormControlLayout prepend and append height that is 100%
  .ouiFormControlLayout__prepend,
  .ouiFormControlLayout__append {
    // sass-lint:disable-block no-important
    height: auto !important;
  }
}