@import "../variables";
@import "../mixins";

$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
$autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
$autocomplete-color-white: unquote("rgb(#{$color-white})");
$autocomplete-suggestion-color-active: unquote("rgb(#{$palette-grey-200})");

.root {
  position: relative;
  &.focus {
    .label {
      color: $autocomplete-color-primary;
    }
    .suggestions {
      max-height: $items-overflow-max-height;
      visibility: visible;
      box-shadow: $zdepth-shadow-1;
    }
  }
}

.label {
  font-size: $font-size-tiny;
  color: $color-text-secondary;
  transition: color $animation-duration $animation-curve-default;
}

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

.suggestions {
  position: absolute;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: $autocomplete-color-white;
  max-height: 0;
  visibility: hidden;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: max-height, box-shadow;
  &:not(.up) {
    bottom: auto;
    margin-top: -$input-height / 3;
  }
  &.up {
    top: auto;
    bottom: 0;
  }
}

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

.input {
  padding-bottom: 0;
}