/* Search bar — auto-loaded for the search-bar snippet
   (site/snippets/search/search-bar.php). A dark bar as tall as the column
   headings beside it, staying at the top of the scrolling centre. */

.search-bar {
  --fa-serif: 0;
  /* A smaller optical shift than elsewhere, for the field and the query chip
     alike, so the two keep their text in the same place. */
  --optical-shift: var(--optical-shift-bar);
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s) var(--space-3xs);
  font-size: var(--fs-heading);
  color: var(--color-white);
  background: var(--color-black);
  border-bottom: var(--border);
}
.search-bar__icon {
  flex: none;
  width: var(--mark-size);
}
.search-bar__field {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: 0; /* the caret marks the focused field; the bar is the field */
}
.search-bar__field::placeholder {
  color: inherit;
  opacity: var(--opacity-dimmed);
}

/* The query chip stands in for a field that is filled but not focused, with
   the loupe inside it in place of the bar's own. The field stays in place for
   the keyboard, only out of sight. */
.search-bar .search-bar__query {
  display: none;
  color: var(--color-white);
  background: var(--color-query);
}
.search-bar--filled:has(.search-bar__field:not(:focus)) > .search-bar__icon {
  display: none;
}
.search-bar--filled .search-bar__field:not(:focus) {
  position: absolute;
  width: 1px;
  opacity: 0;
}
.search-bar--filled .search-bar__field:not(:focus) ~ .search-bar__query.chip {
  display: inline-flex;
  min-width: 0;
}
.search-bar__query .chip__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* The field's optical shift (below), so the query does not move up when
     the chip takes the field's place. */
  translate: 0 calc(var(--optical-shift) / 2);
}
/* The bar's gap after the loupe, so the query does not move left either. */
.search-bar__query .chip__icon {
  margin-inline-end: calc(var(--space-s) - var(--space-2xs));
}

/* One search bar per layout: the one in the head bar (see layout/header) below
   60rem, where it is plain content of that bar; the one above the results
   otherwise. */
.search-bar--head {
  position: static;
  flex: 1;
  min-width: 0;
  padding: 0;
  font-size: inherit;
  background: none;
  border: 0;
}
/* Optical centring, as in a chip (ui/chip): the query moves down by half of
   --optical-shift beside the loupe, without moving anything else. */
.search-bar__field {
  translate: 0 calc(var(--optical-shift) / 2);
}
@media (max-width: 60rem) {
  .search-bar:not(.search-bar--head) {
    display: none;
  }
}