/* JQuery Autocomplete Styling */
/* ---------------------------------------------------- */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.combobox-container {
  position: relative;
}

.combobox-suggestions {
  position: absolute;
  left: 0;
  width: 100%;
  background: $color-white;
  z-index: 1100;
}
.combobox-suggestion {
  color: $color-text-grey;
  border-bottom: 1px solid $color-border-default;
  border-left: 1px solid $color-border-default;
  border-right: 1px solid $color-border-default;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  text-align: left;
}
.combobox-suggestion:first-child {
  border-top: 1px solid $color-border-default;
}
.combobox-suggestion:hover,
.combobox-suggestion:focus {
  color: $color-white;
  background-color: $color-background-grey;
}

.combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus {
  cursor: pointer;
  display: inline;
  position: absolute;
  top: 6px;
  right: 5px;
  border: none;
  background: transparent;
  color: $color-text-grey;
}

/* http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html */
.js-combobox[type=text]::-ms-clear { display: none; width: 0; height: 0; }
.js-combobox[type=text]::-ms-reveal { display: none; width: 0; height: 0; }