/* Query Filter: Taxonomy
 *
 * The resources sidebar. The plugin renders each facet as a label and a
 * checkbox list; these rules give it the design's treatment: a bold heading,
 * a green "+" in place of each checkbox, and a chevron on collapsible parents.
--------------------------------------------- */

.wp-block-query-filter-taxonomy {
	gap: var(--wp--preset--spacing--16);
	margin-bottom: var(--wp--preset--spacing--40);
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__label {
	color: var(--wp--preset--color--shark);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
}

/* Term rows, flat or nested. */
.wp-block-query-filter-taxonomy .wp-block-query-filter__checkbox-group,
.wp-block-query-filter-taxonomy .wp-block-query-filter__term-list {
	gap: var(--wp--preset--spacing--12);
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__checkbox-group label,
.wp-block-query-filter-taxonomy .wp-block-query-filter__term-list label {
	color: var(--wp--preset--color--abbey);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	padding: 0;
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__checkbox-group label:hover,
.wp-block-query-filter-taxonomy .wp-block-query-filter__term-list label:hover {
	color: var(--wp--preset--color--shark);
}

/* Native checkboxes become a "+" that turns into a "−" once selected. */
.wp-block-query-filter-taxonomy input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%2308A828" d="M5 0h2v12H5z"/><path fill="%2308A828" d="M0 5h12v2H0z"/></svg>') center / 12px 12px no-repeat;
	cursor: pointer;
}

.wp-block-query-filter-taxonomy input[type="checkbox"]:checked {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%2308A828" d="M0 5h12v2H0z"/></svg>');
}

.wp-block-query-filter-taxonomy input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--emerald);
	outline-offset: 3px;
}

.wp-block-query-filter-taxonomy input[type="checkbox"]:checked + * ,
.wp-block-query-filter-taxonomy label:has(input:checked) {
	color: var(--wp--preset--color--shark);
	font-weight: 500;
}

/* Parents in the collapsed hierarchy read as section headings. */
.wp-block-query-filter-taxonomy .wp-block-query-filter__term.has-children > label {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__term-list:not([data-depth="0"]) {
	margin-top: var(--wp--preset--spacing--12);
	padding-left: var(--wp--preset--spacing--8);
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__toggle-children {
	color: var(--wp--preset--color--shark);
}

.wp-block-query-filter-taxonomy .wp-block-query-filter__toggle-children::before {
	width: 0.45em;
	height: 0.45em;
}

/* "See all" reads as a link. */
.wp-block-query-filter-taxonomy .wp-block-query-filter__show-all {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--salem);
	font-size: var(--wp--preset--font-size--2-x-small);
	font-weight: 700;
	cursor: pointer;
}

/* Selected terms float to the top of their list, so an active filter is never
   buried below the fold of a long facet. Both containers are flex columns, so
   `order` does the moving; it changes visual order only, and tab order still
   follows the markup. In a hierarchy the parent of a selected child rises too,
   and the selected child rises within that parent. */
.wp-block-query-filter-taxonomy .wp-block-query-filter__checkbox-group > label:has(input:checked),
.wp-block-query-filter-taxonomy .wp-block-query-filter__term-list > li:has(input:checked) {
	order: -1;
}