/*
 * Librarium Militaris: the filter drawer.
 *
 * Every facet the archive can be narrowed by, in columns under the control bar.
 * Opened and closed by the archive controller, which only adds and removes
 * .is-hidden: the drawer itself is plain markup that is either there or not.
 */

@layer components {
  .drawer {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-veil);
    max-height: 60vh;
    overflow-y: auto;
  }

  .drawer__grid {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-16) var(--gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);

    @media (min-width: 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (min-width: 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* One group to a column. Seven groups over a four-wide grid puts the four that
     grow across the top row and the three short ones underneath. */
  .drawer__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
  }

  .filtergroup__title {
    display: flex;
    justify-content: space-between;
    color: var(--color-ink-bright);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-2xs);
    text-transform: uppercase;
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  /* On one narrow column every list is as tall as every other, so the cap is what
     keeps the drawer from running past the screen. Beside each other it is the
     stack of short groups that sets the height, and the taller cap below takes
     over: Format, Event Type and Language stacked run taller than one list
     capped at 10rem, which left the long lists scrolling inside a short box with
     dead space under it. */
  .filtergroup__chips {
    --chips-max-height: 10rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    max-height: var(--chips-max-height);
    overflow-y: auto;
    padding-right: var(--space-8);

    @media (min-width: 768px) { --chips-max-height: 16rem; }
  }

  /* One value of one facet. The modifiers say what state it is in by moving the
     three variables, never by restating the box. */
  .chip {
    --chip-background: var(--color-surface-sunken);
    --chip-color: var(--color-ink-soft);
    --chip-border: var(--color-border-strong);

    background-color: var(--chip-background);
    border: 1px solid var(--chip-border);
    color: var(--chip-color);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius);
    text-align: left;
    transition: all var(--transition-chip);

    &:hover {
      --chip-color: var(--color-ink-bright);
      --chip-border: var(--color-border-hover);
    }

    &.is-on {
      --chip-background: var(--color-accent-wash);
      --chip-color: var(--color-accent);
      --chip-border: var(--color-accent);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}