// bootstrap does flex-grow: 1 by default which makes the
// text input roughly the same size as the select in many cases
.input-group > .search-q {
  flex-grow: 4;
}

.input-group > .search-autocomplete-wrapper {
  display: inline-block;
  flex-grow: 4;
  padding: 0;
  position: relative;

  .search-q {
    border: 0;
    height: 100%;
    width: 100%;
  }

  ul {
    display: block;
  }
}

.search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
}

// ensure that the search bar appears at the top of the page when focused using
// anchor links, e.g. from the skip links navigation
.search-field,
.search-q {
  scroll-margin: 5rem;
}