/*
 * ILM Components -- Terms (1.20.0).
 *
 * ## Why this file, wordpress-categories.css and wordpress-tags.css say the same thing
 *
 * Categories, Tags and Terms share one renderer (WordPress\Terms) and therefore one
 * set of element classes. They do not share a stylesheet, and the duplication
 * is the cheaper of two options: a shared file would be a further asset all
 * three depend on, loaded whenever any is used, and the rules below
 * are twenty lines.
 *
 * The copies are scoped to their own component boundary rather than written
 * against `.ilm-terms__*` alone, so a page using only one of the three loads
 * only rules that apply to it.
 *
 * ## The separators are drawn, not written
 *
 * The markup is a real list. The comma between two terms is a `::after` on
 * every item but the last, which means a sighted reader sees the punctuation
 * and a screen reader hears "list, 3 items" -- rather than a run of names with
 * nothing to separate them. See WordPress\Terms.
 */

.ilm-component--wordpress-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin-block: 0 var(--ilm-c-space-xs);
	justify-content: var(--ilm-c-text);
}

.ilm-component--wordpress-terms .ilm-terms__prefix {
	font-weight: 600;
}

.ilm-component--wordpress-terms .ilm-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-component--wordpress-terms.ilm-display-list .ilm-terms__list {
	flex-direction: column;
	gap: 0.15em;
}

.ilm-component--wordpress-terms .ilm-terms__item {
	margin: 0;
}

.ilm-component--wordpress-terms.ilm-display-inline .ilm-terms__item:not(:last-child)::after {
	content: ",";
}

.ilm-component--wordpress-terms .ilm-terms__link {
	color: inherit;
}