// Autocomplete
//================================================== //

// Uses Many Popup Menu Styles and Text Input
.popupmenu.autocomplete {
  border: 1px solid $input-color-focus-border;
  border-radius: 0 0 3px 3px;
  border-top: 1px solid $dropdown-menu-separator-color;
  box-shadow: $autocomplete-box-shadow;
  line-height: 30px;
  margin-top: -1px;
  overflow: auto;
  padding: 5px 0;

  &.is-ontop {
    border-radius: 3px 3px 0 0;
    box-shadow: $autocomplete-box-shadow-flipped;
  }

  li {
    color: $popupmenu-color;

    &:hover {
      background-color: $popupmenu-hover-color;
    }

    &.is-selected {
      background-color: $dropdown-color-selected-background;
      color: $dropdown-color-selected-font;
    }
  }

  // Disable arrows
  + .arrow {
    display: none;
  }

  a {
    color: inherit;
    padding: $input-field-padding;

    > * {
      vertical-align: middle;
    }

    > .icon {
      position: static;
    }

    span {
      line-height: normal;
    }
  }

  small {
    color: inherit;
  }

  a::before,
  a::after {
    display: none;
  }

  .is-selected i {
    color: $dropdown-color-selected-font;
  }
}

input.autocomplete.is-open {
  background-color: $autocomplete-active-bg-color;
  border: 1px solid $dropdown-menu-border-color;
  border-bottom: 1px solid $dropdown-menu-separator-color;
  border-radius: 3px 3px 0 0;

  &.is-ontop {
    border: 1px solid $dropdown-menu-border-color;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid $dropdown-menu-separator-color;
    box-shadow: $autocomplete-box-shadow-flipped;
  }
}