@keyframes wc-skeleton-shimmer {
	to {
		transform: translateX(100%);
	}
}

:where(.wc-block-product-filters) {
	--top-padding: var(--wp-admin--admin-bar--height);
	display: inline-flex;
}

@media (max-width: 782px) {
	:where(.wc-block-product-filters) {
		--top-padding: var(--adminbar-mobile-padding, 0);
	}
}

:where(.wc-block-product-filters) .wc-block-product-filters__close-overlay,
:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay {
	align-items: center;
	background: transparent;
	border: transparent;
	color: inherit;
	display: flex;
	font-size: 0.875em;
	padding: 0;
}

:where(.wc-block-product-filters) .wc-block-product-filters__close-overlay svg,
:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay svg {
	fill: currentColor;
}

:where(.wc-block-product-filters) .wc-block-product-filters__close-overlay span,
:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay span {
	padding: 0 5px;
}

:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay svg {
	height: var(--wc-product-filters-overlay-icon-size, 1.5em);
	width: var(--wc-product-filters-overlay-icon-size, 1.5em);
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay {
	background-color: transparent;
	inset: 0;
	pointer-events: none;
	position: fixed;
	top: var(--top-padding);
	transition: background-color 0.5s;
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay-wrapper {
	height: 100%;
	position: relative;
	width: 100%;
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay-dialog {
	background-color: var(
		--wc-product-filters-overlay-background-color,
		var(
			--wc-product-filters-background-color,
			var(--wp--preset--color--base, #fff)
		)
	);
	color: var(
		--wc-product-filters-overlay-text-color,
		var(--wc-product-filters-text-color, var(--wp--preset--color--base, #111))
	);
	display: flex !important;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	inset: 0;
	max-height: 100%;
	position: absolute;
	transform: translateY(100vh);
	transition: none;
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay-header {
	display: flex;
	flex-flow: row-reverse;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0;
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(
		--wc-product-filter-block-spacing,
		var(--wp--style--block-gap, 1.2rem)
	);
	overflow-y: scroll;
	padding: 0 var(--wp--preset--spacing--40);
}

:where(.wc-block-product-filters)
	.wc-block-product-filters__overlay-content
	> :first-child {
	margin-top: 0;
}

:where(.wc-block-product-filters) .wc-block-product-filters__overlay-footer {
	box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.102);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

:where(.wc-block-product-filters) .wc-block-product-filters__apply {
	width: 100%;
}

:where(.wc-block-product-filters).is-overlay-opened
	.wc-block-product-filters__overlay {
	background-color: rgba(95, 95, 95, 0.35);
	pointer-events: auto;
	z-index: 9999;
}

:where(.wc-block-product-filters).is-overlay-opened
	.wc-block-product-filters__overlay-dialog {
	color: var(--wc-product-filters-overlay-color, inherit);
	transform: translateY(0);
	transition: transform 0.5s;
}

@media (min-width: 993px) {
	:where(.wc-block-product-filters),
	:where(.wc-block-product-filters).is-overlay-opened {
		display: flex;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay,
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-footer,
	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-header,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__open-overlay,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay-footer,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay-header {
		display: none;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__overlay,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay {
		background: inherit;
		color: inherit;
		inset: 0;
		pointer-events: auto;
		position: relative;
		transition: none;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-wrapper,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay-wrapper {
		background: inherit;
		color: inherit;
		height: auto;
		width: auto;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-dialog,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay-dialog {
		background: inherit;
		color: inherit;
		position: relative;
		transform: none;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__overlay-content,
	:where(.wc-block-product-filters).is-overlay-opened
		.wc-block-product-filters__overlay-content {
		background: inherit;
		color: inherit;
		flex-grow: 1;
		overflow: visible;
		padding: 0;
	}
}

@media (max-width: 992px) {
	:where(.wc-block-product-filters)
		.wc-block-product-filters__overlay-content
		.wp-block-group {
		display: block;
	}

	:where(.wc-block-product-filters)
		.wc-block-product-filters__overlay-content
		.wp-block-group
		> div {
		margin: 20px 0;
	}
}

.wc-block-product-filter--hidden {
	display: none;
}