/**
 * BCFC Core - FacetWP facets (1.2.0, package P2-FWP; FACETCORE-014, -036, EVARCHIVE-V03, A11Y-006/008;
 * 1.2.1: A11Y-030 search borders, .facet-wrap hide rule; 1.4.0: a hidden Reset leaves the layout, the
 * "Filters" row at ≤1024px).
 *
 * Replaces FacetWP's front.css (hard-coded colors, PNG sprites, 40 px margins), which Core switches
 * off. Loaded in the <head> on listing contexts (FacetWP::enqueue_styles), else through FacetWP's
 * footer asset list. Depends on the widget pack's button.css (the Reset button is a bcfc_button).
 *
 * RULE: no color or font literals in this folder. Colors: var(--e-global-color-<id>); type:
 * var(--e-global-typography-<id>-*). `tools/build.sh` and `wp bcfc doctor` (css_hex_lint) fail on a
 * hex value, a color keyword or a color function.
 *
 * Every Core facet's wrapper carries `bcfc-core-facet bcfc-core-facet--<variant>` (FacetWP::wrapper,
 * variants in includes/modules/facetwp/facets.php), so each facet is styled by what Figma draws, with
 * no class on the Elementor widget. Widths come from the widget (Figma: CD search 630, FIB column 290,
 * Locations search 907, Events/Blog search 630, Resources search 290, panel rows 265 / 316).
 *
 * Figma values (file bbZEnmKFELDjGZ7R8GBm2l):
 *   row           3053:3178 · 54 tall, padding 15/30, radius 8, White Light, 16 Medium Work Sans Black,
 *                 22 px chevron 30 px from the right (Chevron down 407:219)
 *   row-bordered  3053:4146 · the same + 1 px Gray border (inside stroke: padding 14/29)
 *   search-box    3053:3209 · 630 × 56, 1 px border (Figma Black 30; 1.2.1 Black 50, see below), radius 8,
 *                 padding 12/16, gap 4, 32 × 32 White Light icon tile (radius 6) with a 13 px magnifier in Black
 *   search-tall   3053:6000 · the same, 75 tall
 *   search-pill   3053:4877 / 3053:5686 · 1 px border (Figma Gray; 1.2.1 Black 50), radius 38
 *   search-pill-filled 3053:4142 · + White Light fill, padding 12/30
 *   1.2.1 (A11Y-030, WCAG 1.4.11; TIM-ANSWERS Q1 "accessibility, unless it's a brand color"): a search
 *   field's border is the only boundary that identifies it, so it needs 3:1 against the page. Figma's Gray
 *   pill border measured 1.10:1 on White Light (events, blog, resources, FIB) and the Black 30 box border
 *   2.10:1 (CD, Locations); every search variant now draws its border in Black 50 (bcfcc06, 3.92:1 on
 *   White Light, 3.99:1 on White - the same token as the Contact form's underline). Dropdown rows keep
 *   Figma's look: their label text and the Black chevron identify them.
 *   tabs          3053:4881 / 3053:5407 · 16 SemiBold Work Sans capitals (bcfcf08), gap 40, centered;
 *                 current Black, others Black 60 (TIM-ANSWERS Q1: bcfcc23, not Figma's Black 50)
 *   tabs-start    3053:5678 · left-aligned
 *   pager         3053:6013 · gap 32, 16 Medium Work Sans; current page Black (Q5), other pages
 *                 Black 60 (Q1); 5 × 10 chevrons (1.667 px stroke) in Black 50 - icons (Q1) - and Black
 *                 30 when disabled on the first / last page
 *   reset         3053:3201 · "Reset Filters" + ×, Boulder Red on Boulder Red 4, as the widget pack's
 *                 bcfc_button (TIM-ANSWERS Q4: pack geometry, padding and motion; Figma gives the color
 *                 role only). Hover Boulder Red 8 (Q5 tint buttons). Centered (CD / Locations panels)
 *   reset-block   3053:4158 · full width, text left, × right (FIB)
 *   1.4.0 (Round 1): the Creative Directory and Locations facets use the Filmed in Boulder variants
 *   (search-pill-filled, row-bordered, reset-block; facets.php), so row, search-box, search-tall and reset
 *   have no facet today. Their rules stay. A Reset shows only while a filter or search is set (§1).
 *   checks        Locations "More Filters" (approved deviation 2026-08-31): 16 Medium Work Sans rows
 * No hover states are invented (Figma draws none) except the Q5 tint-button hover. Every control has a
 * visible 2 px Boulder Red focus ring (8.36:1 on White Light).
 */

/* ------------------------------------------------------------------------------------------
 * 1. FacetWP essentials (front.css is not loaded) and hiding
 * ---------------------------------------------------------------------------------------- */

.facetwp-facet {
	margin: 0;
}

.facetwp-hidden {
	display: none !important;
}

.facetwp-facet.is-loading {
	pointer-events: none;
}

.facetwp-counter {
	display: none;
}

/* A facet with no data (hide_empty), a pager with one page, or one facets.js hid: the facet and its
 * Elementor widget leave the layout, so no container gap is left behind.
 * 1.2.1 (P4-CDARCHIVE hand-off): facetwp-elementor's Facet widget prints the facet inside an extra
 * <div class="facet-wrap"> (facetwp-elementor widgets/facet.php), so the widget is
 * .elementor-widget-container > .facet-wrap > .facetwp-facet (or .facet-wrap directly under the widget
 * with Elementor's optimized markup). 1.2.0 matched only the facet as a direct child, so a hidden pager or
 * a no-data facet left its widget as a 0-px flex item with a container gap on each side (+80 px under the
 * grid on /directory/?_dir_search=yoga and under the empty-state message on /events/).
 * 1.4.0 (Round 1: "'Reset Filters' button should only appear after I set a filter"): a facet FacetWP hid
 * itself - the auto-hide Reset, class facetwp-hidden on the facet wrapper, printed by the server for the
 * first paint (FacetWP::wrapper()) and toggled by FacetWP's script after that - takes its widget out of
 * the layout the same way. Only the wrapper counts (.facetwp-facet.facetwp-hidden): FacetWP also puts
 * facetwp-hidden on parts inside other facets. Measured before: the Filter Panel kept one stray 32 px gap
 * on /filmed-in-boulder/ (344 px instead of 312) and 9.5 px on /directory/ and /locations/. */
.bcfc-core-facet--no-data,
.bcfc-core-facet--single-page,
.bcfc-core-facet--hidden,
.elementor-widget-facetwp-facet:has(> .elementor-widget-container > :is(.bcfc-core-facet--no-data, .bcfc-core-facet--single-page, .bcfc-core-facet--hidden, .facetwp-facet.facetwp-hidden)),
.elementor-widget-facetwp-facet:has(> :is(.bcfc-core-facet--no-data, .bcfc-core-facet--single-page, .bcfc-core-facet--hidden, .facetwp-facet.facetwp-hidden)),
.elementor-widget-facetwp-facet:has(> .elementor-widget-container > .facet-wrap > :is(.bcfc-core-facet--no-data, .bcfc-core-facet--single-page, .bcfc-core-facet--hidden, .facetwp-facet.facetwp-hidden)),
.elementor-widget-facetwp-facet:has(> .facet-wrap > :is(.bcfc-core-facet--no-data, .bcfc-core-facet--single-page, .bcfc-core-facet--hidden, .facetwp-facet.facetwp-hidden)) {
	display: none !important;
}

.bcfc-core-facet {
	box-sizing: border-box;
	max-width: 100%;
}

.bcfc-core-facet *,
.bcfc-core-facet *::before,
.bcfc-core-facet *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------
 * 2. Dropdown rows (row, row-bordered)
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet--row,
.bcfc-core-facet--row-bordered {
	position: relative;
	min-height: 54px;
}

.bcfc-core-facet--row .facetwp-dropdown,
.bcfc-core-facet--row-bordered .facetwp-dropdown {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 15px 52px 15px 30px;
	border: 0;
	border-radius: 8px;
	background-color: var(--e-global-color-secondary);
	background-image: none;
	box-shadow: none;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.bcfc-core-facet--row-bordered .facetwp-dropdown {
	padding: 14px 51px 14px 29px;
	border: 1px solid var(--e-global-color-accent);
}

.bcfc-core-facet--row .facetwp-dropdown option,
.bcfc-core-facet--row-bordered .facetwp-dropdown option {
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-secondary);
}

/* The Figma chevron (22 × 22, 30 px from the right, 16 px from the top). */
.bcfc-core-facet--row::after,
.bcfc-core-facet--row-bordered::after {
	content: "";
	position: absolute;
	top: 16px;
	right: 30px;
	width: 22px;
	height: 22px;
	background-color: var(--e-global-color-text);
	-webkit-mask: url("../icons/facet-chevron-down.svg") center / 22px 22px no-repeat;
	mask: url("../icons/facet-chevron-down.svg") center / 22px 22px no-repeat;
	pointer-events: none;
}

/* Reserved before FacetWP fills the facet: the row itself, so nothing shifts (FACETCORE-036). */
.bcfc-core-facet--row:empty,
.bcfc-core-facet--row-bordered:empty {
	border-radius: 8px;
	background-color: var(--e-global-color-secondary);
}

.bcfc-core-facet--row-bordered:empty {
	border: 1px solid var(--e-global-color-accent);
}

.bcfc-core-facet .facetwp-dropdown:focus {
	outline: none;
}

.bcfc-core-facet .facetwp-dropdown:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
 * 3. Search (search-box, search-tall, search-pill, search-pill-filled)
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet--search-box,
.bcfc-core-facet--search-pill,
.bcfc-core-facet--search-pill-filled {
	min-height: 56px;
}

.bcfc-core-facet--search-tall {
	min-height: 75px;
}

.bcfc-core-facet .facetwp-input-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 11px 15px;
	border: 1px solid var(--e-global-color-bcfcc06);
	border-radius: 8px;
}

.bcfc-core-facet--search-tall .facetwp-input-wrap {
	height: 75px;
	padding-top: 0;
	padding-bottom: 0;
}

.bcfc-core-facet--search-pill .facetwp-input-wrap,
.bcfc-core-facet--search-pill-filled .facetwp-input-wrap {
	border-radius: 38px;
}

.bcfc-core-facet--search-pill-filled .facetwp-input-wrap {
	padding: 11px 29px;
	background-color: var(--e-global-color-secondary);
}

.bcfc-core-facet .facetwp-input-wrap:focus-within {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* The icon tile: 32 × 32, White Light, radius 6, a 13 px magnifier in Black. Decorative
 * (aria-hidden); FacetWP still refreshes on a click. */
.bcfc-core-facet .facetwp-icon {
	position: relative;
	display: block;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 6px;
	background-color: var(--e-global-color-secondary);
	font-style: normal;
	opacity: 1;
	cursor: pointer;
}

.bcfc-core-facet .facetwp-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	background-color: var(--e-global-color-text);
	-webkit-mask: url("../icons/facet-search.svg") center / 13px 13px no-repeat;
	mask: url("../icons/facet-search.svg") center / 13px 13px no-repeat;
}

.bcfc-core-facet .facetwp-icon.f-loading::before {
	opacity: 0.4;
}

.bcfc-core-facet input.facetwp-search {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: none;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
}

/* Placeholders are secondary text: Black 60 (TIM-ANSWERS Q1). */
.bcfc-core-facet input.facetwp-search::placeholder {
	color: var(--e-global-color-bcfcc23);
	opacity: 1;
}

/* Figma draws no clear button. */
.bcfc-core-facet input.facetwp-search::-webkit-search-cancel-button,
.bcfc-core-facet input.facetwp-search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------------------------------
 * 4. Tab rows (radio facets: tabs, tabs-start)
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet--tabs,
.bcfc-core-facet--tabs-start {
	min-height: 25px;
}

.bcfc-core-facet .bcfc-core-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 40px;
	row-gap: 16px;
	margin: 0;
	padding: 0;
}

.bcfc-core-facet--tabs-start .bcfc-core-tabs {
	justify-content: flex-start;
}

.bcfc-core-facet .bcfc-core-tabs .facetwp-radio {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--e-global-color-bcfcc23);
	font-family: var(--e-global-typography-bcfcf08-font-family), sans-serif;
	font-size: var(--e-global-typography-bcfcf08-font-size);
	font-weight: var(--e-global-typography-bcfcf08-font-weight);
	line-height: var(--e-global-typography-bcfcf08-line-height);
	letter-spacing: var(--e-global-typography-bcfcf08-letter-spacing);
	text-transform: var(--e-global-typography-bcfcf08-text-transform, uppercase);
	white-space: nowrap;
	cursor: pointer;
}

.bcfc-core-facet .bcfc-core-tabs .facetwp-radio.checked {
	color: var(--e-global-color-text);
}

.bcfc-core-facet .bcfc-core-tabs .facetwp-radio.disabled {
	opacity: 0.5;
	cursor: default;
}

.bcfc-core-facet .bcfc-core-tabs .facetwp-radio:focus {
	outline: none;
}

.bcfc-core-facet .bcfc-core-tabs .facetwp-radio:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
 * 5. Pager
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet--pager:empty:not(.bcfc-core-facet--single-page) {
	min-height: 24px;
}

.bcfc-core-facet .bcfc-core-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}

.bcfc-core-facet .bcfc-core-pager .facetwp-page {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--e-global-color-bcfcc23);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	cursor: pointer;
}

/* 24 × 24 minimum target (WCAG 2.5.8) without changing Figma's 32 px spacing. */
.bcfc-core-facet .bcfc-core-pager button.facetwp-page::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

.bcfc-core-facet .bcfc-core-pager .facetwp-page.active {
	color: var(--e-global-color-text);
}

.bcfc-core-facet .bcfc-core-pager .facetwp-page.dots,
.bcfc-core-facet .bcfc-core-pager .facetwp-page.is-disabled {
	cursor: default;
}

.bcfc-core-facet .bcfc-core-pager .bcfc-core-pager__chevron {
	display: block;
	width: 5px;
	height: 10px;
	background-color: var(--e-global-color-bcfcc06);
	-webkit-mask: url("../icons/pager-chevron.svg") center / 5px 10px no-repeat;
	mask: url("../icons/pager-chevron.svg") center / 5px 10px no-repeat;
}

.bcfc-core-facet .bcfc-core-pager .prev .bcfc-core-pager__chevron {
	transform: rotate(180deg);
}

.bcfc-core-facet .bcfc-core-pager .is-disabled .bcfc-core-pager__chevron {
	background-color: var(--e-global-color-bcfcc07);
}

.bcfc-core-facet .bcfc-core-pager .facetwp-page:focus {
	outline: none;
}

.bcfc-core-facet .bcfc-core-pager .facetwp-page:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
 * 6. Reset Filters - the widget pack's bcfc_button, tint color role
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet--reset:empty,
.bcfc-core-facet--reset-block:empty {
	min-height: 60px;
}

.bcfc-core-facet .bcfc-core-reset-wrap {
	display: grid;
	grid-template-columns: 100%;
	justify-items: center;
}

.bcfc-core-facet--reset-block .bcfc-core-reset-wrap {
	justify-items: stretch;
}

.bcfc-core-facet .bcfc-core-reset.bcfc-button {
	--bcfc-btn-color: var(--e-global-color-primary);
	--bcfc-btn-bg: var(--e-global-color-bcfcc05);
	--bcfc-btn-focus: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
}

.bcfc-core-facet .bcfc-core-reset .bcfc-button__text {
	line-height: var(--e-global-typography-text-line-height);
}

.bcfc-core-facet--reset-block .bcfc-core-reset.bcfc-button {
	width: 100%;
}

.bcfc-core-facet .bcfc-core-reset.bcfc-button:hover .bcfc-button__bg,
.bcfc-core-facet .bcfc-core-reset.bcfc-button:focus-visible .bcfc-button__bg {
	background-color: var(--e-global-color-3f19454);
}

/* ------------------------------------------------------------------------------------------
 * 7. Checkbox groups (Locations "More Filters")
 * ---------------------------------------------------------------------------------------- */

.bcfc-core-facet .bcfc-core-checks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.bcfc-core-facet .bcfc-core-checks .facetwp-checkbox {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	text-align: left;
	cursor: pointer;
}

.bcfc-core-facet .bcfc-core-check__box {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--e-global-color-bcfcc06);
	border-radius: 4px;
	background-color: var(--e-global-color-secondary);
}

.bcfc-core-facet .facetwp-checkbox.checked .bcfc-core-check__box {
	border-color: var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
}

.bcfc-core-facet .facetwp-checkbox.checked .bcfc-core-check__box::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--e-global-color-secondary);
	-webkit-mask: url("../icons/facet-check.svg") center / 12px 12px no-repeat;
	mask: url("../icons/facet-check.svg") center / 12px 12px no-repeat;
}

.bcfc-core-facet .facetwp-checkbox.disabled {
	opacity: 0.5;
	cursor: default;
}

.bcfc-core-facet .facetwp-checkbox:focus {
	outline: none;
}

.bcfc-core-facet .facetwp-checkbox:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
 * 8. The listing while FacetWP refreshes (1.0.0; the listing only - FACETCORE-020)
 * ---------------------------------------------------------------------------------------- */

.facetwp-template {
	transition: opacity 0.2s ease-out;
}

.facetwp-template.bcfc-core-is-loading {
	opacity: 0.4;
}

.facetwp-template:focus {
	outline: none;
}

/* ------------------------------------------------------------------------------------------
 * 9. Small screens (Figma is desktop-only; DECISIONS "Filter panels": tabs wrap, no hidden scroll)
 * ---------------------------------------------------------------------------------------- */

@media (max-width: 880px) {

	.bcfc-core-facet .bcfc-core-tabs {
		column-gap: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.facetwp-template {
		transition: none;
	}
}

/* Filters and pagers are screen controls: the printed page is the listing. */
@media print {

	.bcfc-core-facet {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------------------------
 * 10. The "Filters" row at ≤1024px (1.4.0, Round 1)
 * ---------------------------------------------------------------------------------------- */

/* At ≤1024px each archive's dropdowns collapse behind a closed "Filters (n)" row, the button the
 * [bcfc_filter_toggle] shortcode prints (core.css gives it layout only and hides it above 1024px; core.js
 * §6 opens and closes the panel). The three archives each drew that row with their own copy of this rule
 * as Custom CSS on the shortcode widget (3525 › f1b5e02, 4335 › cda0b02, 3517 › 3517a03), and the copies
 * had drifted (a Black 30 border and a flex row on the Creative Directory, a Gray border and a grid on
 * the other two). One definition, Filmed in Boulder's - the reference for all three filter bars: Figma's
 * bordered filter row 3053:4146 at full width (54 tall, 1px Gray, radius 8, White Light, 16 Medium Work
 * Sans Black, the 22px chevron 30px from the right). `button.` so it outranks core.css's base rule in
 * either load order; a Custom CSS copy still on a widget outranks this and draws the same row. */
@media (max-width: 1024px) {

	button.bcfc-core-filter-toggle {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: center;
		column-gap: 4px;
		width: 100%;
		height: 54px;
		padding: 14px 29px;
		border: 1px solid var(--e-global-color-accent);
		border-radius: 8px;
		background-color: var(--e-global-color-secondary);
		color: var(--e-global-color-text);
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: var(--e-global-typography-text-font-size);
		font-weight: var(--e-global-typography-text-font-weight);
		line-height: var(--e-global-typography-text-line-height);
		letter-spacing: var(--e-global-typography-text-letter-spacing);
		text-align: left;
	}

	/* The chevron is pinned to the last track: the count span is `hidden` until a filter is set, so it
	 * would otherwise sit right after the label. */
	button.bcfc-core-filter-toggle .bcfc-core-filter-toggle__icon {
		grid-column: 3;
		justify-self: end;
		width: 22px;
		height: 22px;
	}

	button.bcfc-core-filter-toggle .bcfc-core-filter-toggle__icon path {
		stroke-width: 2;
	}

	button.bcfc-core-filter-toggle:focus {
		outline: none;
	}

	button.bcfc-core-filter-toggle:focus-visible {
		outline: 2px solid var(--e-global-color-primary);
		outline-offset: 2px;
	}
}