@import '../colors.css';
@import '../variables.css';
@import '../input/config.css';
@import './config.css';

.autocomplete {
  padding: var(--unit) 0;
  position: relative;

  @apply --reset;
}

.clear {
  cursor: pointer;
  display: block;
  left: -4px;
  padding: 4px;
  position: absolute;
  top: 12px;
  z-index: 10;
}

.withclear input {
  text-indent: 28px;
}

.withclear label {
  transition-property: top, left, font-size, color;
}

.inputFilled {
  composes: filled from '../input/theme.css';
}

.withclear input:not(:focus):not(.inputFilled) ~ label {
  left: 28px;
}

.values {
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 0 calc(var(--unit) / 2) 0;
}

.value {
  margin: var(--autocomplete-value-margin);
}

.suggestions {
  background-color: var(--autocomplete-suggestions-background);
  box-shadow: var(--zdepth-shadow-1);
  list-style: none;
  max-height: 1px;
  -ms-overflow-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  transition-duration: var(--animation-duration);
  transition-property: max-height, box-shadow;
  transition-timing-function: var(--animation-curve-default);
  width: 100%;
  z-index: var(--z-index-highest);
}

.suggestion {
  cursor: pointer;
  font-size: var(--input-field-font-size);
  padding: var(--autocomplete-suggestion-padding);

  &.active {
    background-color: var(--autocomplete-suggestion-active-background);
  }
}

.input {
  position: relative;

  &::after {
    border-left: var(--autocomplete-border-size) solid transparent;
    border-right: var(--autocomplete-border-size) solid transparent;
    border-top: var(--autocomplete-border-size) solid var(--input-text-bottom-border-color);
    content: '';
    height: 0;
    pointer-events: none;
    position: absolute;
    right: var(--input-chevron-offset);
    top: 50%;
    transition: transform var(--animation-duration) var(--animation-curve-default);
    width: 0;
  }
}

.inputInputElement {
  padding: var(--input-field-padding) calc(3 * var(--input-chevron-offset)) var(--input-field-padding) 0;
}