/*
 * Librarium Militaris: the applied filters.
 *
 * The bar under the control bar that says what the listing is currently narrowed
 * to, one pill per facet, and the way to drop all of them at once.
 */

@layer components {
  .activefilters {
    border-top: 1px solid var(--color-border-soft);
    background-color: var(--color-inset-soft);
  }

  .activefilters__list {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-8) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    transition: all var(--transition-chip);
  }

  /* Which facet the value belongs to, said once and quietly: three pills reading
     "Necrons", "GT" and "English" do not otherwise say what they are. */
  .pill__group {
    opacity: 0.5;
    text-transform: uppercase;
    font-size: var(--text-10);
    margin-right: var(--space-4);
  }

  .pill__remove {
    display: flex;
    margin-left: var(--space-4);
    color: inherit;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-danger); }

    & svg {
      width: var(--space-12);
      height: var(--space-12);
    }

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

  .clear-all {
    font-family: var(--font-heading);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-sm);
    margin-left: var(--space-8);
    text-decoration: underline;
    text-decoration-color: var(--color-accent-line);
    text-underline-offset: 2px;
    transition: color var(--transition-fast);

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