/**
 * WooBricks — "Swatches" mode for the NATIVE Bricks "Filter - Checkbox".
 *
 * Selecting Mode = "Swatches" renders the native Checkbox layout (indicator +
 * name + count) and adds the .wbxe-swatches class. Here we only paint each
 * option's indicator (.brx-input-indicator) with the term colour and tune the
 * selected state — everything else (size, border, radius, typography, gap,
 * count align) is the native Checkbox styling, controlled from the Bricks panel.
 *
 * The per-term colour is injected as --wbxe-swatch-color by
 * Woo_Swatches_Manager::build_filter_swatch_css() (Bricks' native Color field /
 * legacy wbxe_swatch_color).
 */

.wbxe-swatches {
	/* Default swatch size — the native "Indicator" size control overrides this. */
	--brx-indicator-size: 1.35em;
}

/* Paint the swatch with the term colour, both unchecked and checked (native
   would otherwise swap to its accent colour when checked). Size / border /
   radius stay under the native Indicator controls. */
.wbxe-swatches .brx-input-indicator,
.wbxe-swatches input:checked + .brx-input-indicator {
	background-color: var( --wbxe-swatch-color, #d9d9d9 ) !important;
}

/* Drop the native check tick — selection is shown by the ring + bold name (a
   tick is invisible on same-coloured swatches, e.g. a white tick on white). */
.wbxe-swatches .brx-input-indicator::after {
	display: none !important;
}

/* Selected swatch: a ring around it. */
.wbxe-swatches input:checked + .brx-input-indicator {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

/* Push the count to the far right (like the design), regardless of the native
   "Count: Align end" toggle. */
.wbxe-swatches .brx-option-text {
	flex: 1;
}

.wbxe-swatches .brx-option-text .brx-option-count {
	margin-inline-start: auto;
}

/* Make the count a centred box so the native Count: Width / Height / Padding /
   Background controls (any Mode) apply and the number sits centred inside it —
   an inline <span> ignores width/height. */
.brxe-filter-checkbox .brx-option-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}