@import "../../variables";

.autocomplete-box {
  width: 800px;
  padding: 10px;
  @include font("light");
  .box {
    @include border("thin");
    position: relative;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
  }
  input {
    @include border();
    padding: 5px 10px;
    width: 100%;
  }
  ul {
    padding: 0px;
    top: -1px;
    cursor: pointer;
    @include border("thin");
    position: relative;
    list-style: none;
    margin:0px;
    border-radius: 0px 0px 5px 5px;
    overflow: hidden;
  }

  li{
    padding: 5px 10px;
    &.validQuery{
      border-bottom: 1px solid $dark-border;
      @include font();
      color: $colors-light;
      font-style: italic;
      &:hover{
        background: $colors-darkest;
        color: $colors-lightest;
      }
    }
    &:hover{
      background: $colors-light;
    }
    b{
      @include font(bold);
    }
  }
  i{
    position: absolute;
    &.search {
      right: 5px;
    }
    &.close{
      right: 35px;
    }
    top:5px;
    cursor: pointer;
  }
}