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

.ouiSuggestItem {
  display: flex;
  flex-grow: 1;
  align-items: center;
  font-size: $ouiFontSizeXS;
  white-space: nowrap;

  &.ouiSuggestItem-isClickable {
    width: 100%;
    text-align: left;

    &:hover,
    &:focus {
      cursor: pointer;
      background-color: $ouiColorLightestShade;

      .ouiSuggestItem__type { //sass-lint:disable-line nesting-depth
        color: $ouiColorDarkestShade;
      }
    }
  }

  @each $name, $color in $ouiSuggestItemColors {
    .ouiSuggestItem__type--#{$name} {
      $backgroundColor: tintOrShade($color, 82%, 70%);
      background-color: $backgroundColor;
      color: makeHighContrastColor($color, $backgroundColor);
    }
  }

  .ouiSuggestItem__label,
  .ouiSuggestItem__type,
  .ouiSuggestItem__description {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
  }

  .ouiSuggestItem__type {
    position: relative;
    flex-shrink: 0;
    flex-basis: auto;
    width: $ouiSizeXL;
    height: $ouiSizeXL;
    text-align: center;
    overflow: hidden;
    padding: $ouiSizeXS;
    justify-content: center;
    align-items: center;
  }

  .ouiSuggestItem__label {
    @include ouiTextTruncate;
    font-family: var(--oui-code-font-family);
    overflow: hidden;
    text-overflow: ellipsis;
    padding: $ouiSizeXS $ouiSizeS;
    color: $ouiTextColor;
    display: block;

    // Sets labelWidth from 20% to 90% in increments of 10%
    @for $i from 20 through 90 {
      &.ouiSuggestItem__label--width#{$i} {
        flex-basis: $i * 1%;
        min-width: $i * 1%;
        $i: $i + 10;
      }
    }

    &.ouiSuggestItem__labelDisplay--expand {
      flex-basis: auto;
      flex-shrink: 1;
    }
  }

  .ouiSuggestItem__description {
    color: $ouiColorDarkShade;
    flex-basis: auto;
    padding-top: $ouiSizeXS * .5;
    display: block;

    &.ouiSuggestItem__description--wrap {
      @include ouiTextBreakWord;
      white-space: normal;
      line-height: $ouiSizeM + 2px;
    }

    &.ouiSuggestItem__description--truncate {
      @include ouiTextTruncate;
      line-height: $ouiLineHeight;
    }

    &:empty {
      flex-grow: 0;
      margin-left: 0;
    }
  }
}