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

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

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

      .euiSuggestItem__type { //sass-lint:disable-line nesting-depth
        color: $euiColorDarkestShade;
      }
    }
  }

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

  .euiSuggestItem__label,
  .euiSuggestItem__type,
  .euiSuggestItem__description {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
  }

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

  .euiSuggestItem__label {
    @include euiTextTruncate;
    font-family: $euiCodeFontFamily;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: $euiSizeXS $euiSizeS;
    color: $euiTextColor;
    display: block;

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

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

  .euiSuggestItem__description {
    color: $euiColorDarkShade;
    flex-basis: auto;
    padding-top: $euiSizeXS * .5;
    display: block;

    &.euiSuggestItem__description--wrap {
      @include euiTextBreakWord;
      white-space: normal;
      line-height: $euiSizeM + 2px;
    }

    &.euiSuggestItem__description--truncate {
      @include euiTextTruncate;
      line-height: $euiLineHeight;
    }

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