.typeahead {
  position: relative;

  .typeahead-popover {
    @include euiBottomShadow($adjustBorders: true);
    border: 1px solid;
    border-color: $euiBorderColor;
    color: $euiTextColor;
    background-color: $euiColorEmptyShade;
    position: absolute;
    top: -8px;
    z-index: $euiZContentMenu;
    width: 100%;
    border-radius: $euiBorderRadius;

    .typeahead-items {
      max-height: 60vh;
      overflow-y: auto;
    }

    .typeahead-item {
      height: $euiSizeXL;
      white-space: nowrap;
      font-size: $euiFontSizeXS;
      vertical-align: middle;
      padding: 0;
      border-bottom: none;
      line-height: normal;
    }

    .typeahead-item:hover {
      cursor: pointer;
    }

    .typeahead-item:last-child {
      border-bottom: 0px;
      border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
    }

    .typeahead-item:first-child {
      border-bottom: 0px;
      border-radius: $euiBorderRadius $euiBorderRadius 0 0;
    }

    .typeahead-item.active {
      background-color: $euiColorLightestShade;


      .suggestionItem__callout {
        background: $euiColorEmptyShade;
      }

      .suggestionItem__text {
        color: $euiColorFullShade;
      }

      .suggestionItem__type {
        color: $euiColorFullShade;
      }

      .suggestionItem--field {
        .suggestionItem__type {
          background-color: tint($euiColorWarning, 80%);
        }
      }

      .suggestionItem--value {
        .suggestionItem__type {
          background-color: tint($euiColorSecondary, 80%);
        }
      }

      .suggestionItem--operator {
        .suggestionItem__type {
          background-color: tint($euiColorPrimary, 80%);
        }
      }

      .suggestionItem--conjunction {
        .suggestionItem__type {
          background-color: tint($typeaheadConjunctionColor, 80%);
        }
      }

    }
  }
}

.inline-form .typeahead.visible .input-group {
  > :first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  > :last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.suggestionItem {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  align-items: center;
  font-size: $euiFontSizeXS;
  white-space: nowrap;
  &.suggestionItem--field {
    .suggestionItem__type {
      background-color: tint($euiColorWarning, 90%);
      color: makeHighContrastColor($euiColorWarning, tint($euiColorWarning, 90%));
    }
  }

  &.suggestionItem--value {
    .suggestionItem__type {
      background-color: tint($euiColorSecondary, 90%);
      color: makeHighContrastColor($euiColorSecondary, tint($euiColorSecondary, 90%));
    }

    .suggestionItem__text {
      width: auto;
    }
  }

  &.suggestionItem--operator {
    .suggestionItem__type {
      background-color: tint($euiColorPrimary, 90%);
      color: makeHighContrastColor($euiColorPrimary, tint($euiColorSecondary, 90%));
    }
  }

  &.suggestionItem--conjunction {
    .suggestionItem__type {
      background-color: tint($typeaheadConjunctionColor, 90%);
      color: makeHighContrastColor($typeaheadConjunctionColor, tint($typeaheadConjunctionColor, 90%));
    }
  }

  &.suggestionItem--recentSearch {
    .suggestionItem__type {
      background-color: $euiColorLightShade;
      color: $euiColorMediumShade;
    }

    .suggestionItem__text {
      width: auto;
    }
  }
}

.suggestionItem__text, .suggestionItem__type, .suggestionItem__description {
  flex-grow: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: column;
}

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


.suggestionItem__text {
  flex-grow: 0; /* 2 */
  flex-basis: auto; /* 2 */
  font-family: $euiCodeFontFamily;
  margin-right: $euiSizeXL;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: $euiSizeXS $euiSizeS;
  color: #111;
}

.suggestionItem__description {
  color: $euiColorDarkShade;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestionItem__callout {
  font-family: $euiCodeFontFamily;
  background: $euiColorLightestShade;
  color: $euiColorFullShade;
  padding: 0 $euiSizeXS;
  display: inline-block;
}
