/**
 * Saxony - Product Filter Dropdown
 *
 * Loaded through block.json's `style` handle, which WordPress enqueues in both the
 * editor and the frontend, so the editor preview and the real control stay in sync.
 */

:root {
	/*
	 * saxony_custom defines these for every control in the shop - the header
	 * search, the catalog sorting select and WooCommerce's filter Dropdown - and
	 * loads site-wide. Defer to it so all of them stay in step, but keep the same
	 * values inline so this plugin still looks right installed on its own.
	 */
	--saxony-filter-dropdown-border: var(--saxony-control-border, var(--wp--custom--color--tertiary, #d5d8dc));
	--saxony-filter-dropdown-accent: var(--saxony-control-accent, var(--wp--custom--color--primary, #4e5040));
	--saxony-filter-dropdown-surface: var(--saxony-control-surface, var(--wp--preset--color--base, #fff));
}

.wp-block-saxony-product-filter-dropdown {
	position: relative;

	/*
	 * Match the catalog sorting control, which the patterns give the theme's
	 * small preset. Padding, border and line-height are already shared with it,
	 * so matching the font size is what makes the two controls the same height.
	 * Falls back to inheriting when a theme defines no small preset, and an
	 * explicit font size set in the editor still wins - core writes those as
	 * `!important`.
	 */
	font-size: var(--wp--preset--font-size--small, inherit);
}

/* Trigger ------------------------------------------------------------------ */

.saxony-filter-dropdown__toggle {
	align-items: center;
	background: var(--saxony-filter-dropdown-surface);
	border: 1px solid var(--saxony-filter-dropdown-border);
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 0.5em;
	justify-content: space-between;
	line-height: 1.4;
	padding: 0.55em 0.75em;
	text-align: left;
	width: 100%;
}

.saxony-filter-dropdown__toggle:hover {
	border-color: var(--saxony-filter-dropdown-accent);
}

.saxony-filter-dropdown__toggle:focus-visible {
	outline: 2px solid var(--saxony-filter-dropdown-accent);
	outline-offset: 1px;
}

.saxony-filter-dropdown__summary {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.saxony-filter-dropdown__summary.is-placeholder {
	opacity: 0.65;
}

.saxony-filter-dropdown__badge {
	background: var(--saxony-filter-dropdown-accent);
	border-radius: 999px;
	color: #fff;
	flex: 0 0 auto;
	font-size: 0.75em;
	line-height: 1;
	margin-left: auto;
	padding: 0.25em 0.55em;
}

.saxony-filter-dropdown__chevron {
	flex: 0 0 auto;
	height: 0.5em;
	transition: transform 150ms ease-out;
	width: 0.75em;
}

.wp-block-saxony-product-filter-dropdown.is-open .saxony-filter-dropdown__chevron {
	transform: rotate(180deg);
}

/* Panel -------------------------------------------------------------------- */

.saxony-filter-dropdown__panel {
	background: var(--saxony-filter-dropdown-surface);
	border: 1px solid var(--saxony-filter-dropdown-border);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	left: 0;
	margin-top: 0.25rem;
	max-height: 18rem;
	/* Grow past the filter column rather than wrapping every label. */
	min-width: 100%;
	width: max-content;
	max-width: min(24rem, calc(100vw - 2rem));
	overflow-y: auto;
	padding: 0.5rem;
	position: absolute;
	top: 100%;
	z-index: 20;
}

.saxony-filter-dropdown__panel[hidden] {
	display: none;
}

.saxony-filter-dropdown__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.saxony-filter-dropdown__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5em;
	padding: 0.35em 0.25em;
}

.saxony-filter-dropdown__label:hover {
	background: rgba(0, 0, 0, 0.04);
}

.saxony-filter-dropdown__input {
	accent-color: var(--saxony-filter-dropdown-accent);
	flex: 0 0 auto;
	height: 1em;
	margin: 0;
	width: 1em;
}

.saxony-filter-dropdown__input-wrapper {
	display: inline-flex;
	flex: 0 0 auto;
}

.saxony-filter-dropdown__text {
	flex: 1 1 auto;
}

.saxony-filter-dropdown__count {
	flex: 0 0 auto;
	opacity: 0.65;
}

.saxony-filter-dropdown__more {
	opacity: 0.65;
	padding: 0.35em 0.25em;
}

/* Hierarchical taxonomies pass a `depth`; mirror it as indentation. */
.saxony-filter-dropdown__item.has-depth-1 .saxony-filter-dropdown__label {
	padding-left: 1.25em;
}

.saxony-filter-dropdown__item.has-depth-2 .saxony-filter-dropdown__label {
	padding-left: 2.5em;
}

.saxony-filter-dropdown__item.has-depth-3 .saxony-filter-dropdown__label {
	padding-left: 3.75em;
}

/**
 * The panel is absolutely positioned, so any ancestor clipping its overflow cuts
 * it off - which reads as the dropdown being short rather than hidden. Relax it
 * only on the containers that actually hold this block.
 */
.wc-block-product-filters:has(.wp-block-saxony-product-filter-dropdown),
[class*="wp-block-woocommerce-product-filter-"]:has(.wp-block-saxony-product-filter-dropdown) {
	overflow: visible;
}

/* Trigger ------------------------------------------------------------------ */

.saxony-filter-dropdown__toggle {
	align-items: center;
	background: var(--saxony-filter-dropdown-surface);
	border: 1px solid var(--saxony-filter-dropdown-border);
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 0.5em;
	justify-content: space-between;
	line-height: 1.4;
	padding: 0.55em 0.75em;
	text-align: left;
	width: 100%;
}

.saxony-filter-dropdown__toggle:hover {
	border-color: var(--saxony-filter-dropdown-accent);
}

.saxony-filter-dropdown__toggle:focus-visible {
	outline: 2px solid var(--saxony-filter-dropdown-accent);
	outline-offset: 1px;
}

.saxony-filter-dropdown__summary {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.saxony-filter-dropdown__summary.is-placeholder {
	opacity: 0.65;
}

.saxony-filter-dropdown__badge {
	background: var(--saxony-filter-dropdown-accent);
	border-radius: 999px;
	color: #fff;
	flex: 0 0 auto;
	font-size: 0.75em;
	line-height: 1;
	margin-left: auto;
	padding: 0.25em 0.55em;
}

.saxony-filter-dropdown__chevron {
	flex: 0 0 auto;
	height: 0.5em;
	transition: transform 150ms ease-out;
	width: 0.75em;
}

.wp-block-saxony-product-filter-dropdown.is-open .saxony-filter-dropdown__chevron {
	transform: rotate(180deg);
}

/* Panel -------------------------------------------------------------------- */

.saxony-filter-dropdown__panel {
	background: var(--saxony-filter-dropdown-surface);
	border: 1px solid var(--saxony-filter-dropdown-border);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	left: 0;
	margin-top: 0.25rem;
	max-height: 18rem;
	/* Grow past the filter column rather than wrapping every label. */
	min-width: 100%;
	width: max-content;
	max-width: min(24rem, calc(100vw - 2rem));
	overflow-y: auto;
	padding: 0.5rem;
	position: absolute;
	top: 100%;
	z-index: 20;
}

.saxony-filter-dropdown__panel[hidden] {
	display: none;
}

.saxony-filter-dropdown__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.saxony-filter-dropdown__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5em;
	padding: 0.35em 0.25em;
}

.saxony-filter-dropdown__label:hover {
	background: rgba(0, 0, 0, 0.04);
}

.saxony-filter-dropdown__input {
	accent-color: var(--saxony-filter-dropdown-accent);
	flex: 0 0 auto;
	height: 1em;
	margin: 0;
	width: 1em;
}

.saxony-filter-dropdown__input-wrapper {
	display: inline-flex;
	flex: 0 0 auto;
}

.saxony-filter-dropdown__text {
	flex: 1 1 auto;
}

.saxony-filter-dropdown__count {
	flex: 0 0 auto;
	opacity: 0.65;
}

.saxony-filter-dropdown__more {
	opacity: 0.65;
	padding: 0.35em 0.25em;
}

/* Hierarchical taxonomies pass a `depth`; mirror it as indentation. */
.saxony-filter-dropdown__item.has-depth-1 .saxony-filter-dropdown__label {
	padding-left: 1.25em;
}

.saxony-filter-dropdown__item.has-depth-2 .saxony-filter-dropdown__label {
	padding-left: 2.5em;
}

.saxony-filter-dropdown__item.has-depth-3 .saxony-filter-dropdown__label {
	padding-left: 3.75em;
}

/**
 * The panel is absolutely positioned, so any ancestor clipping its overflow cuts
 * it off - which reads as the dropdown being short rather than hidden. Relax it
 * only on the containers that actually hold this block.
 */
.wc-block-product-filters:has(.wp-block-saxony-product-filter-dropdown),
[class*="wp-block-woocommerce-product-filter-"]:has(.wp-block-saxony-product-filter-dropdown) {
	overflow: visible;
}


/* Editor preview ----------------------------------------------------------- */

.editor-styles-wrapper .wp-block-saxony-product-filter-dropdown .saxony-filter-dropdown__panel {
	position: static;
	box-shadow: none;
	margin-top: 0.25rem;
	max-height: none;
}

/**
 * `.screen-reader-text` is a theme-provided class, not a core frontend style.
 * Scope a fallback to our own markup so the <legend>/<label> stay hidden even in a
 * theme that never defines it.
 */
.wp-block-saxony-product-filter-dropdown .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}