/* Filter option — auto-loaded for the filter-option snippet
   (site/snippets/filter/filter-option.php). Two looks, by the group's kind: a
   list item with a circle, or a pill. States: available (as is), selected (filled),
   unavailable (dimmed). The stranded look lives in stranded.snippet.css. */

.filter-option {
  max-width: 100%;
  text-align: left;
}
.filter-option.is-unavailable {
  opacity: var(--opacity-dimmed);
  cursor: default;
}

/* Circle row: a list item (ui/list-item) with a thin rule below */
.filter-option--circles {
  padding-inline: var(--space-s);
}
.filter-option--circles .filter-option__mark {
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
  border: var(--border);
  border-radius: 50%;
}
.filter-option--circles.is-selected .filter-option__mark {
  background: var(--color-fg);
}
.filter-option__label {
  min-width: 0;
}
.filter-option--circles .filter-option__label {
  display: block; /* clipped in the desktop column, see search/filter-column */
}

/* Pill — optical centring as in a chip (ui/chip): the label moves down by
   --optical-shift and the pill gives back half of it above and below. */
.filter-option--pills {
  display: inline-flex;
  padding: calc(var(--space-2xs) - var(--optical-shift) / 2) var(--space-s);
  font-size: var(--fs-meta);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
}
.filter-option--pills .filter-option__label {
  padding-top: var(--optical-shift);
}
.filter-option--pills.is-selected {
  color: var(--color-bg);
  background: var(--color-fg);
  box-shadow: none;
}