theme.scss

@import "../colors";
@import "../globals";
@import "../mixins";
@import "./config";

$input-padding: 2 * $unit;
$input-field-font-size: 1.6 * $unit;
$input-field-padding: .8 * $unit;
$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4;
$input-chevron-offset: 0.8 * $unit;
$input-text-bottom-border-color: rgba($color-black, 0.12);
$input-text-error-color: rgb(222, 50, 38);
$input-text-background-color: transparent;
$input-focus-label-top: 0.6 * $unit;
$input-label-font-size: 1.2 * $unit;
$input-focus-label-top: 0.6 * $unit;
$input-text-label-color: rgba($color-black, 0.26);
$input-underline-height: 2 * $unit;

.autocomplete {
  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;
    }
  }
}

.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 {
  margin: $autocomplete-value-margin;
}

.suggestions {
  @include no-webkit-scrollbar;
  position: absolute;
  z-index: $z-index-high;
  width: 100%;
  max-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  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) {
    margin-top: - $input-padding;
  }
  &.up {
    bottom: 0;
  }
}

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

.input {
  position: relative;
  &:after {
    $size: ($input-field-height / 7);
    $border: $size solid transparent;
    position: absolute;
    top: 50%;
    right: $input-chevron-offset;
    width: 0;
    height: 0;
    pointer-events: none;
    content: "";
    border-top: $size solid $input-text-bottom-border-color;
    border-right: $border;
    border-left: $border;
    transition: transform $animation-duration $animation-curve-default;
  }
}