/*
 * Expanded Sorting Select
 * Structural styles only: no custom color palette or decorative background.
 * Buttons inherit their visual appearance from the active WordPress theme.
 */

.ess-host {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* Remove native dropdown arrows/labels injected by theme wrappers. */
.ess-host::before,
.ess-host::after {
	content: none !important;
	display: none !important;
}

/* Keep the real select in the DOM for theme and AJAX functionality. */
.ess-host > select.ess-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ess-options {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0.75rem;
	direction: inherit;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.ess-option {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0;
	margin: 0 !important;
	cursor: pointer;
	white-space: nowrap;
}

/* Prevent theme select-arrow rules from leaking onto generated buttons. */
.ess-option::before,
.ess-option::after {
	content: none !important;
	display: none !important;
}

.ess-option[aria-pressed="false"] {
	opacity: 0.78;
}

.ess-option[aria-pressed="true"] {
	opacity: 1;
}

/*
 * Remove the white focus/selected ring added by the theme or browser.
 * Active state remains visible through the theme's own button fill and opacity.
 */
.ess-host:focus,
.ess-host:focus-visible,
.ess-host:focus-within,
.ess-options:focus,
.ess-options:focus-visible,
.ess-options:focus-within,
.ess-option,
.ess-option:hover,
.ess-option:focus,
.ess-option:focus-visible,
.ess-option:active,
.ess-option.is-active,
.ess-option[aria-pressed="true"] {
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* Some themes draw the focus ring on child labels/icons. */
.ess-option .w-btn-label,
.ess-option .w-btn-label:focus,
.ess-option .w-btn-label:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

@media (max-width: 600px) {
	.ess-options {
		gap: 0.5rem;
	}

	.ess-option {
		flex: 1 1 calc(33.333% - 0.5rem);
		min-width: 6.5rem;
	}
}