@import "../base";
@import "./config";
@import "../input/config";

.root {
  position: relative;
  padding: $unit 0;
  &.focus {
    .label {
      color: $autocomplete-color-primary;
    }
    .suggestions {
      max-height: $autocomplete-overflow-max-height;
      visibility: visible;
      box-shadow: $zdepth-shadow-1;
    }
  }
  &.errored {
    .suggestions {
      margin-top: - $input-underline-height;
    }
  }
}

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

.values {
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: $unit / 2;
}

.value {
  display: inline-block;
  padding: $autocomplete-value-padding;
  margin: $autocomplete-value-margin;
  font-size: $font-size-tiny;
  color: $autocomplete-color-primary-contrast;
  cursor: pointer;
  background-color: $autocomplete-color-primary;
  border-radius: $autocomplete-value-border-radius;
}

.suggestions {
  position: absolute;
  z-index: $z-index-high;
  width: 100%;
  max-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  visibility: hidden;
  background-color: $autocomplete-suggestions-background;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: max-height, box-shadow;
  &:not(.up) {
    bottom: auto;
  }
  &.up {
    bottom: 0;
  }
}

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

.input {
  padding-top: 0;
  padding-bottom: 0;
}