.vuiSearchInput {
  position: relative;
  display: flex;
  align-items: center;
}

.vuiSearchInput__icon {
  position: absolute;
  left: $sizeM;
  pointer-events: none;
}

.vuiSearchInput__input {
  flex-grow: 1;
  background-color: var(--vui-color-empty-shade);
  border: 1px solid var(--vui-color-medium-shade);
  border-radius: $sizeXs;
  box-shadow: $shadowSmallStart;
  transition: box-shadow $transitionSpeed;
  outline-width: 1px !important;
  outline-style: solid;
  outline-color: transparent;
  outline-offset: -1px !important;

  &:focus-visible {
    outline-color: var(--vui-color-primary-shade) !important;
    box-shadow: $shadowSmallEnd;
  }
}

.vuiSearchInput__input--hasSuggestions {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vuiSearchInput__submitButton {
  position: absolute;
  right: $sizeS;
  line-height: 0; // TODO: Should this be applied to all buttons?
  color: var(--vui-color-dark-shade);
  transition: color $transitionSpeed;

  &:hover {
    color: var(--vui-color-accent-shade);
  }
}

.vuiSearchInput--s {
  .vuiSearchInput__icon {
    top: $sizeXxs + 3px;
  }

  .vuiSearchInput__input {
    padding: $sizeXs * 0.6 $sizeS $sizeXs * 0.6 $sizeL + $sizeS;
    font-size: $fontSizeStandard;
  }
}

.vuiSearchInput--m {
  .vuiSearchInput__icon {
    top: $sizeXs + 1px;
  }

  .vuiSearchInput__input {
    padding: $sizeXs $sizeM $sizeXs $sizeXl + $sizeXs;
    font-size: $fontSizeStandard;
  }
}

.vuiSearchInput--l {
  .vuiSearchInput__icon {
    top: $sizeS + 1px;
  }

  .vuiSearchInput__input {
    padding: $sizeS $sizeM $sizeS $sizeXl + $sizeS;
    font-size: $fontSizeLarge;
  }
}

.vuiSearchInput__ghostText {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
}

.vuiSearchInput__ghostText--hidden {
  visibility: hidden;
}

.vuiSearchInput__ghostText--visible {
  color: var(--vui-color-subdued-shade);
}

.vuiSearchInput--m .vuiSearchInput__ghostText {
  padding: $sizeXs $sizeM $sizeXs $sizeXl + $sizeXs;
  font-size: $fontSizeStandard;
}

.vuiSearchInput--l .vuiSearchInput__ghostText {
  padding: $sizeS $sizeM $sizeS $sizeXl + $sizeS;
  font-size: $fontSizeLarge;
}

.vuiSearchInput__clearButton {
  position: absolute;
  height: 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 $sizeXs $sizeXs 0;
  color: var(--vui-color-dark-shade);
  transition: all $transitionSpeed;

  &:hover {
    color: var(--vui-color-accent-shade);
  }
}
.vuiSearchInputSuggestionsContainer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.vuiSearchInputSuggestions {
  // position: absolute;
  // top: 100%;
  // left: 0;
  // right: 0;
  overflow: hidden;
  background-color: var(--vui-color-empty-shade);
  border: 1px solid var(--vui-color-medium-shade);
  border-top: none;
  border-radius: 0 0 $sizeXs $sizeXs;
  box-shadow: $shadowLargeEnd;
}

.vuiSearchInputSuggestions__suggestionsList {
  max-height: 220px;
  overflow-y: auto;
}

.vuiSearchInputSuggestions__suggestion {
  display: block;
  background-color: var(--vui-color-empty-shade);
  text-decoration: none;
  padding: ($sizeXxs + 1px) $sizeS;
  font-size: $fontSizeStandard;
  color: var(--vui-color-text);
  width: 100%;
  text-align: left;

  &:focus-visible,
  &:hover {
    text-decoration: underline;
    color: var(--vui-color-primary-shade);
    background-color: var(--vui-color-primary-lighter-shade);
  }

  &:focus-visible {
    outline: none;
  }
}

// If at the bottom of the window, add some space
// so the user can comfortably see the complete suggestion list.
.vuiSearchInputSuggestions__bottomSpacer {
  height: $sizeXl;
  pointer-events: none;
}