@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.product-filter {
	max-height: 33px;
	max-width: 33px;
}

.product-filter-container {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.components-popover.is-product-filter {
	border-radius: 4px;
	border: 1px solid var(--color-neutral-5);
	z-index: 10;
}

.product-filter__group {
	padding: 8px;
}

.product-filter__group .components-menu-item__button.components-button {
	border-radius: 4px;
	padding: 8px 12px;

	&:focus,
	&:focus-visible,
	&:focus-within,
	&:hover:not(:disabled) {
		border: none;
		box-shadow: none;
	}

	&:hover:not(:disabled) {
		background-color: var(--color-neutral-0);
	}
}

.product-filter__group .components-menu-item__item {
	display: flex;
	gap: 8px;
}

.product-filter-button {
	white-space: nowrap;
	max-height: 36px;
	@include body-small;
	cursor: pointer;
	color: var(--color-primary-60);
	fill: var(--color-primary-60);
	padding: 8px 12px;
	border-radius: 4px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	&:focus-visible {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		outline: 3px solid transparent;
	}

	&:hover {
		box-shadow: inset 0 0 0 1px var(--color-neutral-20);
		color: var(--color-accent-60);
		fill: var(--color-accent-60);
		background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
	}
}

.product-filter-select {
	display: none;

	@include break-huge {
		display: block;
	}
}
