@import './config';
@import '../../mixins';

.Autocomplete {
  position: relative;
}

.Autocomplete-search {
  @include form-field-select;
  @include form-field-size($form-field-height-base, $form-field-font-size);
  display: table-cell;
  vertical-align: middle;

  .is-searching & {
    background-image: svg-url(map-get($icons, arrowUp)) ;
    border: $form-field-border-focus ;
    box-shadow: $form-field-box-shadow-focus;
  }

  .Autocomplete--searchDisabled & {
    background-color: $form-field-background;
    cursor: pointer;

    &:hover {
      border: $form-field-border-hover;
    }

    &:focus {
      border: $form-field-border-focus;
    }
  }
}

.Autocomplete-search {
  @include select-success;
  @include select-error;
  text-overflow: ellipsis;
  padding-left: rem(16px);
}

.Autocomplete-options {
  position: absolute;
  top: calc(100% - 3px);
  width: 100%;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  list-style: none;
  visibility: hidden;
  background: #fff;
  border: 1px solid $form-field-border-color;
  border-top: 1px solid lighten($form-field-border-color, 10%);
  border-bottom-right-radius: $form-field-border-radius;
  border-bottom-left-radius: $form-field-border-radius;
  opacity: 0;
  transition: $autocomplete-options-transition;
  z-index: 2;

  .is-searching & {
    max-height: $autocomplete-visible-options * $autocomplete-option-height;
    visibility: visible;
    border: 2px solid $form-field-border-color-focus;
    border-top: 1px solid lighten($form-field-border-color, 10%);
    opacity: 1;
  }
}

.Autocomplete-option {
  min-height: $autocomplete-option-height;
  padding: rem(16px);
  font-size: rem(15px);

  &.is-active {
    color: #fff;
    background-color: $color-brand-primary;
  }

  .is-highlighted {
    border-bottom: 1px dotted #aaa;
  }
}

// REFACTOR
.Autocomplete--noReadOnly .Autocomplete-search[readonly] {
  background-color: #fff;
  border-color: $form-field-border-color;

  .has-error & {
    border-color: $color-danger;
  }
}