/* Stranded — the look of a selected option that no longer has matches, for
   every place it shows: circle option, pill option, chip. First version, to
   be revised — which is why it is defined here and nowhere else. Loaded by
   the hosts of those snippets with snippetAssets('filter/stranded'). */

/* Circle option: a half-filled grey circle, a greyed label. */
.filter-option--circles.is-stranded {
  color: var(--color-muted);
}
.filter-option--circles.is-stranded .filter-option__mark {
  border-color: currentColor;
  background: linear-gradient(to right, currentColor 50%, transparent 50%);
}

/* Pill option and chip: a grey fill, a dashed outline. */
.filter-option--pills.is-stranded,
.chip.is-stranded {
  background: color-mix(in srgb, var(--color-muted) 40%, var(--color-bg));
  border: 1px dashed var(--color-fg);
  box-shadow: none;
}