/*
  Quick search bar at the top of the page, plus live search boxes on group pages
*/

/* A common class for all search fields */
.searchBox {
  background-image: url("<%= image_path('magnifier.png') %>");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0.5em center;
  background-color: $searchFieldBackgroundColor;
  text-indent: 2em;
}

/* The quick search box at the top */
.quickSearch {
  margin: 4px;
  z-index: 1;
}

/* Group members search box */
.groupMembersSearch {
  padding: 5px;
  border: 1px solid $formElementBorderColor;
}

.searchLoading {
  /*
    The JavaScript code doing the live search adds this class to the search box when search
    is in progress, then removes it afterwards.
  */
  background-image: url("<%= image_path('ajax-loader.gif') %>");
}

/* Drop-down search result boxes */
.searchResultsBox {
  background: $searchResultsBackground;
  border: 1px solid $searchResultsBorder;
  margin: 0;
  padding: 5px;
  position: absolute;
  width: 750px;
  z-index: 9999;
  font-size: 80%;
  box-shadow: 0 0 10px $defaultBoxShadow;

  .resultsContainer {
    max-height: 350px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .searchResult { }

  .searchResult header {
    font-size: 100%;
    font-weight: bold;
    background: $listHeadingBack;
    color: $listHeadingFore;
    padding: 5px 10px;
  }

  @media #{$screen-breakpoint-one} {
    padding: 0;
    margin: 0;
    left: 0 !important;
    width: 100%;
    font-size: 90%;
  }

  p {
    padding: 0;
    margin: 0;
    color: $searchNoResults;
  }

  table {
    border-spacing: 0;
    margin: 0px;
    padding: 0px;
  }

  th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    padding: 5px !important;
  }

  @media #{$screen-breakpoint-one} {
    .search_result .list tr {
      padding: 0;
    }

    .search_result .list td:first-of-type {
      font-size: 110% !important;
      font-weight: bold;
    }
  }
}

/*
  Extended search form
*/

#extendedSearchForm {
  #searchTerms {
    width: 100%;
    padding: 5px;
  }

  table {
    width: 100%;
  }

  tr:nth-child(odd) {
    background: $formOddRowBack;
  }

  tr:nth-child(even) {
    background: $formEvenRowBack;
  }

  .buttonRow {  /* copy-pasted from form.scss! */
    th, td {
      background: $formButtonRowBack !important;
      text-align: center;
    }
  }

  th {
    font-size: 100%;
  }

  th, td {
  }

  label {
    white-space: nowrap;
  }

  select {
    width: 100%;
  }

  .termSettings {
    display: none;
  }

  .indent {
    margin-left: 1em;
  }

  fieldset {
    margin-bottom: 0;
  }

  legend {
    /* the form is much smaller than other forms and the huge fieldset legends used
       elsewhere look hideous */
    border: none;
    font-weight: normal;
    font-size: 100%;
  }

  p {
    padding: 0;
    margin: 0;
  }

  input[type="button"] {
    padding: 5px 50px;
  }
}

#extendedSearchResultsTitle {
  background: $extendedSearchResultsBack;
  color: $extendedSearchResultsFore;
  border: none;
  padding: 5px 10px;
}

#extendedSearchResultsContainer {
  .searchError {
    color: $extendedSearchError;
    padding: 0;
    margin: 0;
  }

  .noResults {
    color: $extendedSearchNoResults;
    padding: 0;
    margin: 0;
  }

  .list th.matched {
    /* The search term header column */
    border-right: 1px solid $extendedSearchResultsDivider !important;
  }

  .term, .matched {
    /* Force minimum width */
    width: 1px;
    white-space: nowrap;
  }

  .term {
  }

  .matched {
    border-right: 1px solid $extendedSearchResultsDivider;
  }

  .noMatches {
    color: $extendedSearchNoMatches;
  }
}

@media #{$screen-breakpoint-one} {
  /* Remove borders, the list is collapsed */
  #extendedSearchResultsContainer {
    .list th:first-of-type {
      border-right: none;
    }

    .list td:first-of-type {
      font-weight: bold;
      border-right: none;
    }
  }
}

.stickyInline {
  position: sticky;
  top: 0;
}
