.euiSuggestItem {
  display: flex;
  align-items: flex-start;
  font-size: $euiFontSizeXS;
  line-height: $euiSize;
  color: $euiTextColor;
  flex: 1 1 100%;
  max-width: 100%;

  &--truncate {
    .euiSuggestItem__label,
    .euiSuggestItem__description {
      @include euiTextTruncate;
    }
  }
}

// When `onClick` is provided, EuiSuggestItem renders as a <button>
// and we want to adjust styles to better afford the interaction
// stylelint-disable selector-no-qualifying-type
button.euiSuggestItem {
  width: 100%;
  text-align: left;

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

    .euiSuggestItem__label {
      text-decoration: underline;
    }
  }
}
// stylelint-enable selector-no-qualifying-type

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

.euiSuggestItem__type {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-start;
  padding-top: $euiSizeS;
  width: $euiSizeXL;
  min-height: $euiSizeXL;
  align-self: stretch;
}

.euiSuggestItem__label,
.euiSuggestItem__description {
  @include euiTextBreakWord;
  display: inline-block;
  padding: $euiSizeS;
  flex-grow: 1;
}

.euiSuggestItem__label {
  font-family: $euiCodeFontFamily;

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

  &--expand {
    flex-basis: auto;
  }
}

.euiSuggestItem__description {
  color: $euiTextSubduedColor;
  padding-top: $euiSizeS + 1px;
  flex-basis: auto;
  align-self: baseline;

  &.euiSuggestItem__description--wrap {
    @include euiTextBreakWord;
    white-space: normal !important; // stylelint-disable-line declaration-no-important
  }
}

// For specifically within EuiSelectable

.euiSuggestItemOption {
  &[class*='isFocused'],
  &:hover:not([aria-disabled='true']),
  &:focus {
    .euiSuggestItem__label {
      text-decoration: underline;
    }
  }
}