@import "../variables";
@import "../mixins";
$autocomplete-value-background: unquote("rgb(#{$color-primary})");
$autocomplete-value-color: unquote("rgb(#{$color-primary-contrast})");
$autocomplete-label-color: unquote("rgb(#{$color-primary})");
$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
$autocomplete-max-height-suggestions: 40vh;

.container {
  position: relative;
}

.label {
  display: inline-block;
  margin-bottom: $unit * .5;
  font-size: $font-size-tiny;
  color: $autocomplete-label-color;
}

.value {
  display: inline-block;
  padding: $unit * .5 $unit;
  margin: 0 $unit $unit 0;
  font-size: $font-size-small;
  color: $autocomplete-value-color;
  cursor: pointer;
  background-color: $autocomplete-value-background;
  border-radius: 3px;
}

.suggestions {
  position: absolute;
  z-index: 2;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: $autocomplete-suggestions-background;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: max-height;
  box-shadow: $zdepth-shadow-1;
  &:not(.focus) {
    max-height: 0;
    visibility: hidden;
  }
  &.focus {
    max-height: $autocomplete-max-height-suggestions;
    visibility: visible;
  }
  &:not(.up) {
    margin-top: - $input-margin-bottom;
  }
  &.up {
    bottom: $input-margin-bottom;
  }
}

.suggestion {
  padding: $unit;
  cursor: pointer;
  &.active {
    background-color: $autocomplete-suggestion-active-background;
  }
}