/* Filter column — auto-loaded for the filter-column snippet
   (site/snippets/search/filter-column.php). */

/* Only there for its click: the heading stays a child of the column for the
   layout, so it sticks to the top of whatever scrolls. */
.filter-column__row {
  display: contents;
}
.filter-column__toggle {
  flex: none;
  align-self: center;
  width: 1em;
  font-size: var(--fs-subheading);
}
.filter-column .chip-list {
  flex: 1;
}

/* The button stays at the lower edge of the open panel. A <button> takes its
   font axes from its parent (`font: inherit`), hence the axis on the panel. */
.filter-column__panel {
  --fa-serif: 0;
}
.filter-column__show {
  position: sticky;
  bottom: var(--space-s);
  display: block;
  margin: var(--space-s) auto;
}

/* A column: no filter row, no panel. In the narrow column a long option label
   is clipped to one line. */
@media (width > 60rem) {
  .filter-column .chip-list,
  .filter-column__toggle,
  .filter-column__show {
    display: none;
  }
  .filter-column .filter-option__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* A filter row: the groups are a panel that opens over the results, filling
   the screen under the head bar. */
@media (max-width: 60rem) {
  .filter-column__row {
    cursor: pointer;
  }
  .filter-column__toggle {
    align-self: start;
  }
  .filter-column__panel {
    display: none;
  }
  .filter-column--open {
    position: fixed;
    inset: var(--menubar-h) 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
  }
  .filter-column--open .filter-column__panel {
    display: block;
  }
}