attribute-filter.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / attribute-filter.css

woocommerce / assets / client / blocks Last commit date

attribute-filter.css

1476 lines

1	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
2	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/filter-element-label/style.scss *!
3	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
4	/**
5	* Converts a hex value into the rgb equivalent.
6	*
7	* @param {string} hex - the hexadecimal value to convert
8	* @return {string} comma separated rgb values
9	*/
10	/**
11	* Colors
12	*/
13	/**
14	* SCSS Variables.
15	*
16	* Please use variables from this sheet to ensure consistency across the UI.
17	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
18	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
19	*/
20	/**
21	* Converts a hex value into the rgb equivalent.
22	*
23	* @param {string} hex - the hexadecimal value to convert
24	* @return {string} comma separated rgb values
25	*/
26	/**
27	* Colors
28	*/
29	/**
30	* Fonts & basic variables.
31	*/
32	/**
33	* Grid System.
34	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
35	*/
36	/**
37	* Dimensions.
38	*/
39	/**
40	* Shadows.
41	*/
42	/**
43	* Editor widths.
44	*/
45	/**
46	* Block & Editor UI.
47	*/
48	/**
49	* Block paddings.
50	*/
51	/**
52	* React Native specific.
53	* These variables do not appear to be used anywhere else.
54	*/
55	/* stylelint-disable block-closing-brace-newline-after */
56	/* stylelint-enable */
57	@keyframes spinner__animation {
58	0% {
59	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
60	transform: rotate(0deg);
61	}
62	100% {
63	transform: rotate(360deg);
64	}
65	}
66	@keyframes loading__animation {
67	100% {
68	transform: translateX(100%);
69	}
70	}
71	.wc-filter-element-label-list-count::before {
72	content: " (";
73	}
74	.wc-filter-element-label-list-count::after {
75	content: ")";
76	}
77	/!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
78	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/filter-reset-button/style.scss *!
79	\*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
80	/**
81	* Converts a hex value into the rgb equivalent.
82	*
83	* @param {string} hex - the hexadecimal value to convert
84	* @return {string} comma separated rgb values
85	*/
86	/**
87	* Colors
88	*/
89	/**
90	* SCSS Variables.
91	*
92	* Please use variables from this sheet to ensure consistency across the UI.
93	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
94	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
95	*/
96	/**
97	* Converts a hex value into the rgb equivalent.
98	*
99	* @param {string} hex - the hexadecimal value to convert
100	* @return {string} comma separated rgb values
101	*/
102	/**
103	* Colors
104	*/
105	/**
106	* Fonts & basic variables.
107	*/
108	/**
109	* Grid System.
110	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
111	*/
112	/**
113	* Dimensions.
114	*/
115	/**
116	* Shadows.
117	*/
118	/**
119	* Editor widths.
120	*/
121	/**
122	* Block & Editor UI.
123	*/
124	/**
125	* Block paddings.
126	*/
127	/**
128	* React Native specific.
129	* These variables do not appear to be used anywhere else.
130	*/
131	/* stylelint-disable block-closing-brace-newline-after */
132	/* stylelint-enable */
133	@keyframes spinner__animation {
134	0% {
135	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
136	transform: rotate(0deg);
137	}
138	100% {
139	transform: rotate(360deg);
140	}
141	}
142	@keyframes loading__animation {
143	100% {
144	transform: translateX(100%);
145	}
146	}
147	.wc-block-components-filter-reset-button {
148	border: 0;
149	border-radius: 0;
150	margin: 0;
151	padding: 0;
152	vertical-align: baseline;
153	color: inherit;
154	font-family: inherit;
155	font-size: inherit;
156	font-style: inherit;
157	font-weight: inherit;
158	letter-spacing: inherit;
159	line-height: inherit;
160	text-decoration: inherit;
161	text-transform: inherit;
162	background: transparent;
163	box-shadow: none;
164	display: inline;
165	text-shadow: none;
166	text-decoration: underline;
167	font-size: 0.875em;
168	text-decoration: underline;
169	font-weight: normal;
170	color: inherit;
171	font-size: 0.875em;
172	cursor: pointer;
173	}
174	.wc-block-components-filter-reset-button:hover, .wc-block-components-filter-reset-button:focus, .wc-block-components-filter-reset-button:active {
175	background: transparent;
176	}
177	.wc-block-components-filter-reset-button:hover {
178	text-decoration: none;
179	color: inherit;
180	cursor: pointer;
181	}
182	.wc-block-components-filter-reset-button[disabled] {
183	cursor: not-allowed;
184	}
185	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
186	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/filter-submit-button/style.scss *!
187	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
188	/**
189	* Converts a hex value into the rgb equivalent.
190	*
191	* @param {string} hex - the hexadecimal value to convert
192	* @return {string} comma separated rgb values
193	*/
194	/**
195	* Colors
196	*/
197	/**
198	* SCSS Variables.
199	*
200	* Please use variables from this sheet to ensure consistency across the UI.
201	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
202	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
203	*/
204	/**
205	* Converts a hex value into the rgb equivalent.
206	*
207	* @param {string} hex - the hexadecimal value to convert
208	* @return {string} comma separated rgb values
209	*/
210	/**
211	* Colors
212	*/
213	/**
214	* Fonts & basic variables.
215	*/
216	/**
217	* Grid System.
218	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
219	*/
220	/**
221	* Dimensions.
222	*/
223	/**
224	* Shadows.
225	*/
226	/**
227	* Editor widths.
228	*/
229	/**
230	* Block & Editor UI.
231	*/
232	/**
233	* Block paddings.
234	*/
235	/**
236	* React Native specific.
237	* These variables do not appear to be used anywhere else.
238	*/
239	/* stylelint-disable block-closing-brace-newline-after */
240	/* stylelint-enable */
241	@keyframes spinner__animation {
242	0% {
243	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
244	transform: rotate(0deg);
245	}
246	100% {
247	transform: rotate(360deg);
248	}
249	}
250	@keyframes loading__animation {
251	100% {
252	transform: translateX(100%);
253	}
254	}
255	.wc-block-components-filter-submit-button {
256	border: none;
257	display: block;
258	margin-left: auto;
259	white-space: nowrap;
260	}
261	.wc-block-components-filter-submit-button.is-loading {
262	outline: 0 !important;
263	border: 0 !important;
264	background-color: currentColor !important;
265	color: currentColor !important;
266	width: 100%;
267	border-radius: 0.25rem;
268	display: block;
269	line-height: 1;
270	position: relative !important;
271	overflow: hidden !important;
272	max-width: 100% !important;
273	pointer-events: none;
274	box-shadow: none;
275	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
276	opacity: 0.15;
277	margin-top: 16px;
278	width: -moz-max-content;
279	width: max-content;
280	box-shadow: none;
281	border-radius: 0;
282	line-height: initial;
283	}
284	.wc-block-components-filter-submit-button.is-loading > * {
285	visibility: hidden;
286	}
287	.wc-block-components-filter-submit-button.is-loading::after {
288	content: " ";
289	display: block;
290	position: absolute;
291	left: 0;
292	right: 0;
293	top: 0;
294	height: 100%;
295	background-repeat: no-repeat;
296	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
297	transform: translateX(-100%);
298	animation: loading__animation 1.5s ease-in-out infinite;
299	}
300	@media screen and (prefers-reduced-motion: reduce) {
301	.wc-block-components-filter-submit-button.is-loading {
302	animation: none;
303	}
304	}
305	/!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
306	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/form-token-field/style.scss *!
307	\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
308	/**
309	* Converts a hex value into the rgb equivalent.
310	*
311	* @param {string} hex - the hexadecimal value to convert
312	* @return {string} comma separated rgb values
313	*/
314	/**
315	* Colors
316	*/
317	/**
318	* SCSS Variables.
319	*
320	* Please use variables from this sheet to ensure consistency across the UI.
321	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
322	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
323	*/
324	/**
325	* Converts a hex value into the rgb equivalent.
326	*
327	* @param {string} hex - the hexadecimal value to convert
328	* @return {string} comma separated rgb values
329	*/
330	/**
331	* Colors
332	*/
333	/**
334	* Fonts & basic variables.
335	*/
336	/**
337	* Grid System.
338	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
339	*/
340	/**
341	* Dimensions.
342	*/
343	/**
344	* Shadows.
345	*/
346	/**
347	* Editor widths.
348	*/
349	/**
350	* Block & Editor UI.
351	*/
352	/**
353	* Block paddings.
354	*/
355	/**
356	* React Native specific.
357	* These variables do not appear to be used anywhere else.
358	*/
359	/* stylelint-disable block-closing-brace-newline-after */
360	/* stylelint-enable */
361	@keyframes spinner__animation {
362	0% {
363	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
364	transform: rotate(0deg);
365	}
366	100% {
367	transform: rotate(360deg);
368	}
369	}
370	@keyframes loading__animation {
371	100% {
372	transform: translateX(100%);
373	}
374	}
375	.wc-blocks-components-form-token-field-wrapper {
376	/* stylelint-disable no-invalid-position-at-import-rule */
377	/**
378	* Breakpoints & Media Queries
379	*/
380	/**
381	* Converts a hex value into the rgb equivalent.
382	*
383	* @param {string} hex - the hexadecimal value to convert
384	* @return {string} comma separated rgb values
385	*/
386	/**
387	* Long content fade mixin
388	*
389	* Creates a fading overlay to signify that the content is longer
390	* than the space allows.
391	*/
392	/**
393	* Breakpoint mixins
394	*/
395	/**
396	* Focus styles.
397	*/
398	/**
399	* Applies editor left position to the selector passed as argument
400	*/
401	/**
402	* Styles that are reused verbatim in a few places
403	*/
404	/**
405	* Allows users to opt-out of animations via OS-level preferences.
406	*/
407	/**
408	* Reset default styles for JavaScript UI based pages.
409	* This is a WP-admin agnostic reset
410	*/
411	/**
412	* Reset the WP Admin page styles for Gutenberg-like pages.
413	*/
414	/!rtl:begin:ignore/
415	/!rtl:end:ignore/
416	/* stylelint-enable no-invalid-position-at-import-rule */
417	}
418	.wc-blocks-components-form-token-field-wrapper .components-popover {
419	position: fixed;
420	z-index: z-index(".components-popover");
421	top: 0;
422	left: 0;
423	opacity: 0;
424	}
425	.wc-blocks-components-form-token-field-wrapper .components-popover.is-expanded, .wc-blocks-components-form-token-field-wrapper .components-popover[data-x-axis][data-y-axis] {
426	opacity: 1;
427	}
428	.wc-blocks-components-form-token-field-wrapper .components-popover.is-expanded {
429	top: 0;
430	left: 0;
431	right: 0;
432	bottom: 0;
433	z-index: z-index(".components-popover") !important;
434	}
435	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow) {
436	margin-left: 2px;
437	}
438	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::before {
439	border: 8px solid #ccc;
440	}
441	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow).is-alternate::before {
442	border-color: #1e1e1e;
443	}
444	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::after {
445	border: 8px solid #fff;
446	}
447	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::before, .wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::after {
448	content: "";
449	position: absolute;
450	height: 0;
451	width: 0;
452	line-height: 0;
453	}
454	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top] {
455	margin-top: -8px;
456	}
457	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
458	bottom: -8px;
459	}
460	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
461	bottom: -6px;
462	}
463	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
464	border-bottom: none;
465	border-left-color: transparent;
466	border-right-color: transparent;
467	border-top-style: solid;
468	margin-left: -10px;
469	}
470	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
471	margin-top: 8px;
472	}
473	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
474	top: -8px;
475	}
476	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
477	top: -6px;
478	}
479	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
480	border-bottom-style: solid;
481	border-left-color: transparent;
482	border-right-color: transparent;
483	border-top: none;
484	margin-left: -10px;
485	}
486	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
487	margin-left: -8px;
488	}
489	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
490	right: -8px;
491	}
492	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
493	right: -6px;
494	}
495	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
496	border-bottom-color: transparent;
497	border-left-style: solid;
498	border-right: none;
499	border-top-color: transparent;
500	}
501	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
502	margin-left: 8px;
503	}
504	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
505	left: -8px;
506	}
507	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
508	left: -6px;
509	}
510	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
511	border-bottom-color: transparent;
512	border-left: none;
513	border-right-style: solid;
514	border-top-color: transparent;
515	}
516	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=top] {
517	bottom: 100%;
518	}
519	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=bottom] {
520	top: 100%;
521	}
522	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=middle] {
523	align-items: center;
524	display: flex;
525	}
526	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-top {
527	margin-top: 12px;
528	}
529	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-bottom {
530	margin-top: -12px;
531	}
532	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {
533	margin-left: 12px;
534	}
535	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
536	margin-right: 12px;
537	}
538	.wc-blocks-components-form-token-field-wrapper .components-popover__content {
539	height: 100%;
540	background: #fff;
541	border: 1px solid #ccc;
542	box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
543	border-radius: 2px;
544	}
545	.is-alternate .wc-blocks-components-form-token-field-wrapper .components-popover__content {
546	border: 1px solid #1e1e1e;
547	box-shadow: none;
548	}
549	.components-popover .wc-blocks-components-form-token-field-wrapper .components-popover__content {
550	position: absolute;
551	height: auto;
552	overflow-y: auto;
553	}
554	.components-popover.is-expanded .wc-blocks-components-form-token-field-wrapper .components-popover__content {
555	position: static;
556	height: calc(100% - 48px);
557	overflow-y: visible;
558	min-width: auto;
559	border: none;
560	border-top: 1px solid #1e1e1e;
561	}
562	.components-popover[data-y-axis=top] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
563	bottom: 100%;
564	}
565	.components-popover[data-x-axis=center] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
566	left: 50%;
567	transform: translateX(-50%);
568	}
569	.components-popover[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
570	position: absolute;
571	left: 100%;
572	}
573	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
574	margin-left: -25px;
575	}
576	.components-popover[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
577	position: absolute;
578	right: 100%;
579	}
580	.components-popover:not([data-y-axis=middle])[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
581	margin-right: -25px;
582	}
583	.wc-blocks-components-form-token-field-wrapper .components-popover__header {
584	align-items: center;
585	background: #fff;
586	display: flex;
587	height: 48px;
588	justify-content: space-between;
589	padding: 0 8px 0 16px;
590	}
591	.wc-blocks-components-form-token-field-wrapper .components-popover__header-title {
592	overflow: hidden;
593	text-overflow: ellipsis;
594	white-space: nowrap;
595	width: 100%;
596	}
597	.wc-blocks-components-form-token-field-wrapper .components-popover__close.components-button {
598	z-index: z-index(".components-popover__close");
599	}
600	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover {
601	z-index: z-index(".components-tooltip");
602	}
603	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover .components-popover__content {
604	min-width: 0;
605	}
606	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content {
607	background: #1e1e1e;
608	border-radius: 2px;
609	border-width: 0;
610	color: #fff;
611	white-space: nowrap;
612	text-align: center;
613	line-height: 1.4;
614	font-size: 12px;
615	box-shadow: none;
616	}
617	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content > div {
618	padding: 4px 8px;
619	}
620	.wc-blocks-components-form-token-field-wrapper .components-tooltip__shortcut {
621	display: inline-block;
622	margin-left: 8px;
623	}
624	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper {
625	position: relative;
626	}
627	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper .event-catcher {
628	z-index: z-index(".components-tooltip .event-catcher");
629	position: absolute;
630	width: 100%;
631	height: 100%;
632	top: 0;
633	left: 0;
634	bottom: 0;
635	right: 0;
636	}
637	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
638	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
639	padding: 6px 8px;
640	box-shadow: 0 0 0 transparent;
641	transition: box-shadow 0.1s linear;
642	border-radius: 2px;
643	border: 1px solid #949494;
644	/* Fonts smaller than 16px causes mobile safari to zoom. */
645	font-size: 16px;
646	/* Override core line-height. To be reviewed. */
647	line-height: normal;
648	display: flex;
649	flex-wrap: wrap;
650	align-items: center;
651	width: 100%;
652	margin: 0 0 8px 0;
653	padding: 2px 4px;
654	cursor: text;
655	}
656	@media (prefers-reduced-motion: reduce) {
657	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
658	transition-duration: 0s;
659	transition-delay: 0s;
660	}
661	}
662	@media (min-width: 600px) {
663	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
664	font-size: 13px;
665	/* Override core line-height. To be reviewed. */
666	line-height: normal;
667	}
668	}
669	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:focus {
670	border-color: var(--wp-admin-theme-color);
671	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
672	outline: 2px solid transparent;
673	}
674	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-webkit-input-placeholder {
675	color: rgba(30, 30, 30, 0.62);
676	}
677	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-moz-placeholder {
678	opacity: 1;
679	color: rgba(30, 30, 30, 0.62);
680	}
681	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:-ms-input-placeholder {
682	color: rgba(30, 30, 30, 0.62);
683	}
684	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-disabled {
685	background: #ddd;
686	border-color: #ddd;
687	}
688	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-active {
689	border-color: var(--wp-admin-theme-color);
690	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
691	outline: 2px solid transparent;
692	}
693	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
694	display: inline-block;
695	flex: 1;
696	font-size: 16px;
697	width: 100%;
698	max-width: 100%;
699	margin-left: 4px;
700	padding: 0;
701	min-height: 24px;
702	min-width: 50px;
703	background: inherit;
704	border: 0;
705	color: #1e1e1e;
706	box-shadow: none;
707	}
708	@media (min-width: 600px) {
709	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
710	font-size: 13px;
711	}
712	}
713	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
714	outline: none;
715	box-shadow: none;
716	}
717	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input {
718	width: auto;
719	}
720	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
721	display: inline-block;
722	margin-bottom: 4px;
723	}
724	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__help {
725	font-size: 12px;
726	font-style: normal;
727	color: #757575;
728	}
729	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token {
730	font-size: 13px;
731	display: flex;
732	margin: 2px 4px 2px 0;
733	color: #1e1e1e;
734	max-width: 100%;
735	}
736	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__token-text,
737	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__remove-token {
738	background: #4ab866;
739	}
740	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__token-text,
741	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__remove-token {
742	background: #cc1818;
743	}
744	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__token-text,
745	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
746	color: #757575;
747	}
748	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless {
749	position: relative;
750	padding: 0 16px 0 0;
751	}
752	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
753	background: transparent;
754	color: var(--wp-admin-theme-color);
755	}
756	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
757	background: transparent;
758	color: #757575;
759	position: absolute;
760	top: 1px;
761	right: 0;
762	}
763	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
764	color: #4ab866;
765	}
766	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
767	color: #cc1818;
768	border-radius: 4px 0 0 4px;
769	padding: 0 4px 0 6px;
770	}
771	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
772	color: #1e1e1e;
773	}
774	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
775	cursor: default;
776	}
777	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
778	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
779	display: inline-block;
780	line-height: 24px;
781	height: auto;
782	background: #ddd;
783	min-width: unset;
784	transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
785	}
786	@media (prefers-reduced-motion: reduce) {
787	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
788	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
789	transition-duration: 0s;
790	transition-delay: 0s;
791	animation-duration: 1ms;
792	animation-delay: 0s;
793	}
794	}
795	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
796	border-radius: 2px 0 0 2px;
797	padding: 0 0 0 8px;
798	white-space: nowrap;
799	overflow: hidden;
800	text-overflow: ellipsis;
801	}
802	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
803	cursor: pointer;
804	border-radius: 0 2px 2px 0;
805	padding: 0 2px;
806	color: #1e1e1e;
807	line-height: 10px;
808	overflow: initial;
809	}
810	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button:hover {
811	color: #1e1e1e;
812	}
813	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
814	flex: 1 0 100%;
815	min-width: 100%;
816	max-height: 9em;
817	overflow-y: auto;
818	transition: all 0.15s ease-in-out;
819	list-style: none;
820	border-top: 1px solid #757575;
821	margin: 4px -4px -4px;
822	padding: 0;
823	}
824	@media (prefers-reduced-motion: reduce) {
825	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
826	transition-duration: 0s;
827	transition-delay: 0s;
828	}
829	}
830	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
831	color: #757575;
832	display: block;
833	font-size: 13px;
834	padding: 4px 8px;
835	margin: 0;
836	cursor: pointer;
837	}
838	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
839	background: var(--wp-admin-theme-color);
840	color: #fff;
841	}
842	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion-match {
843	text-decoration: underline;
844	}
845
846	.wc-blocks-components-form-token-field-wrapper {
847	border-color: #949494;
848	}
849	.wc-blocks-components-form-token-field-wrapper .components-visually-hidden,
850	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
851	border: 0;
852	clip: rect(1px, 1px, 1px, 1px);
853	clip-path: inset(50%);
854	height: 1px;
855	width: 1px;
856	margin: -1px;
857	overflow: hidden;
858	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
859	overflow-wrap: normal !important;
860	word-wrap: normal !important;
861	padding: 0;
862	position: absolute !important;
863	}
864	.wc-blocks-components-form-token-field-wrapper .components-form-token-field,
865	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
866	border-color: inherit;
867	box-sizing: border-box;
868	margin-bottom: 0;
869	}
870	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
871	background-color: #fff;
872	border-radius: 0;
873	box-shadow: none;
874	color: #000;
875	position: relative;
876	}
877	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
878	min-height: 30px;
879	}
880	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button,
881	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
882	background: #e0e0e0;
883	}
884	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token {
885	border: none;
886	}
887	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
888	background-color: #fff;
889	border: 1px solid #949494;
890	border-width: 0 1px 1px;
891	left: -1px;
892	margin: 1px 0 0;
893	position: absolute;
894	right: -1px;
895	top: 100%;
896	z-index: 50;
897	}
898	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list:empty {
899	display: none;
900	}
901	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
902	padding: 8px;
903	}
904	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
905	background: #f0f0f0;
906	color: #2f2f2f;
907	}
908	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token {
909	margin-right: 0;
910	position: relative;
911	width: 100%;
912	z-index: 1;
913	}
914	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__remove-token.components-button,
915	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
916	background: transparent;
917	}
918	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
919	padding-left: 4px;
920	width: 100%;
921	}
922	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token + input[type=text].components-form-token-field__input {
923	position: absolute;
924	}
925	.wc-blocks-components-form-token-field-wrapper.single-selection .is-active .components-form-token-field__token + input[type=text].components-form-token-field__input {
926	border: 1px solid #949494;
927	margin: 0 2px 4px;
928	padding: 0 5px;
929	position: static;
930	}
931	/!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
932	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/filter-placeholder/style.scss *!
933	\******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
934	/**
935	* Converts a hex value into the rgb equivalent.
936	*
937	* @param {string} hex - the hexadecimal value to convert
938	* @return {string} comma separated rgb values
939	*/
940	/**
941	* Colors
942	*/
943	/**
944	* SCSS Variables.
945	*
946	* Please use variables from this sheet to ensure consistency across the UI.
947	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
948	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
949	*/
950	/**
951	* Converts a hex value into the rgb equivalent.
952	*
953	* @param {string} hex - the hexadecimal value to convert
954	* @return {string} comma separated rgb values
955	*/
956	/**
957	* Colors
958	*/
959	/**
960	* Fonts & basic variables.
961	*/
962	/**
963	* Grid System.
964	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
965	*/
966	/**
967	* Dimensions.
968	*/
969	/**
970	* Shadows.
971	*/
972	/**
973	* Editor widths.
974	*/
975	/**
976	* Block & Editor UI.
977	*/
978	/**
979	* Block paddings.
980	*/
981	/**
982	* React Native specific.
983	* These variables do not appear to be used anywhere else.
984	*/
985	/* stylelint-disable block-closing-brace-newline-after */
986	/* stylelint-enable */
987	@keyframes spinner__animation {
988	0% {
989	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
990	transform: rotate(0deg);
991	}
992	100% {
993	transform: rotate(360deg);
994	}
995	}
996	@keyframes loading__animation {
997	100% {
998	transform: translateX(100%);
999	}
1000	}
1001	.wc-block-filter-title-placeholder {
1002	outline: 0 !important;
1003	border: 0 !important;
1004	background-color: currentColor !important;
1005	color: currentColor !important;
1006	width: 100%;
1007	border-radius: 0.25rem;
1008	display: block;
1009	line-height: 1;
1010	position: relative !important;
1011	overflow: hidden !important;
1012	max-width: 100% !important;
1013	pointer-events: none;
1014	box-shadow: none;
1015	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
1016	opacity: 0.15;
1017	border-radius: 1.625em;
1018	box-shadow: none;
1019	min-width: 80px;
1020	margin-top: 12px;
1021	margin-bottom: 12px;
1022	max-width: -moz-max-content !important;
1023	max-width: max-content !important;
1024	}
1025	.wc-block-filter-title-placeholder > * {
1026	visibility: hidden;
1027	}
1028	.wc-block-filter-title-placeholder::after {
1029	content: " ";
1030	display: block;
1031	position: absolute;
1032	left: 0;
1033	right: 0;
1034	top: 0;
1035	height: 100%;
1036	background-repeat: no-repeat;
1037	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
1038	transform: translateX(-100%);
1039	animation: loading__animation 1.5s ease-in-out infinite;
1040	}
1041	@media screen and (prefers-reduced-motion: reduce) {
1042	.wc-block-filter-title-placeholder {
1043	animation: none;
1044	}
1045	}
1046	.wc-block-filter-title-placeholder .wc-block-stock-filter__title,
1047	.wc-block-filter-title-placeholder .wc-block-price-filter__title,
1048	.wc-block-filter-title-placeholder .wc-block-active-filters__title,
1049	.wc-block-filter-title-placeholder .wc-block-attribute-filter__title,
1050	.wc-block-filter-title-placeholder .wc-block-rating-filter__title {
1051	margin: 0;
1052	height: 1em;
1053	}
1054	/!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
1055	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/blocks/attribute-filter/style.scss *!
1056	\*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
1057	/**
1058	* Converts a hex value into the rgb equivalent.
1059	*
1060	* @param {string} hex - the hexadecimal value to convert
1061	* @return {string} comma separated rgb values
1062	*/
1063	/**
1064	* Colors
1065	*/
1066	/**
1067	* SCSS Variables.
1068	*
1069	* Please use variables from this sheet to ensure consistency across the UI.
1070	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1071	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1072	*/
1073	/**
1074	* Converts a hex value into the rgb equivalent.
1075	*
1076	* @param {string} hex - the hexadecimal value to convert
1077	* @return {string} comma separated rgb values
1078	*/
1079	/**
1080	* Colors
1081	*/
1082	/**
1083	* Fonts & basic variables.
1084	*/
1085	/**
1086	* Grid System.
1087	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
1088	*/
1089	/**
1090	* Dimensions.
1091	*/
1092	/**
1093	* Shadows.
1094	*/
1095	/**
1096	* Editor widths.
1097	*/
1098	/**
1099	* Block & Editor UI.
1100	*/
1101	/**
1102	* Block paddings.
1103	*/
1104	/**
1105	* React Native specific.
1106	* These variables do not appear to be used anywhere else.
1107	*/
1108	/* stylelint-disable block-closing-brace-newline-after */
1109	/* stylelint-enable */
1110	@keyframes spinner__animation {
1111	0% {
1112	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
1113	transform: rotate(0deg);
1114	}
1115	100% {
1116	transform: rotate(360deg);
1117	}
1118	}
1119	@keyframes loading__animation {
1120	100% {
1121	transform: translateX(100%);
1122	}
1123	}
1124	.wp-block-woocommerce-attribute-filter {
1125	border-style: none !important;
1126	}
1127	.wp-block-woocommerce-attribute-filter h1,
1128	.wp-block-woocommerce-attribute-filter h2,
1129	.wp-block-woocommerce-attribute-filter h3,
1130	.wp-block-woocommerce-attribute-filter h4,
1131	.wp-block-woocommerce-attribute-filter h5,
1132	.wp-block-woocommerce-attribute-filter h6 {
1133	text-transform: inherit;
1134	}
1135
1136	.wc-block-attribute-filter {
1137	margin-bottom: 16px;
1138	border-radius: inherit;
1139	border-color: inherit;
1140	}
1141	.wc-block-attribute-filter .is-loading {
1142	outline: 0 !important;
1143	border: 0 !important;
1144	background-color: currentColor !important;
1145	color: currentColor !important;
1146	width: 100%;
1147	border-radius: 0.25rem;
1148	display: block;
1149	line-height: 1;
1150	position: relative !important;
1151	overflow: hidden !important;
1152	max-width: 100% !important;
1153	pointer-events: none;
1154	box-shadow: none;
1155	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
1156	opacity: 0.15;
1157	box-shadow: none;
1158	border-radius: 0;
1159	height: 1em;
1160	margin-top: 16px;
1161	}
1162	.wc-block-attribute-filter .is-loading > * {
1163	visibility: hidden;
1164	}
1165	.wc-block-attribute-filter .is-loading::after {
1166	content: " ";
1167	display: block;
1168	position: absolute;
1169	left: 0;
1170	right: 0;
1171	top: 0;
1172	height: 100%;
1173	background-repeat: no-repeat;
1174	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
1175	transform: translateX(-100%);
1176	animation: loading__animation 1.5s ease-in-out infinite;
1177	}
1178	@media screen and (prefers-reduced-motion: reduce) {
1179	.wc-block-attribute-filter .is-loading {
1180	animation: none;
1181	}
1182	}
1183	.wc-block-attribute-filter.style-dropdown {
1184	position: relative;
1185	display: flex;
1186	gap: 16px;
1187	align-items: flex-start;
1188	}
1189	.wc-block-attribute-filter.style-dropdown .single-selection .components-form-token-field__token + input[type=text].components-form-token-field__input {
1190	opacity: 0;
1191	}
1192	.wc-block-attribute-filter.style-dropdown .single-selection .components-form-token-field__input-container.is-active .components-form-token-field__token + input[type=text].components-form-token-field__input {
1193	opacity: 1;
1194	}
1195	.wc-block-attribute-filter.style-dropdown .wc-block-components-filter-submit-button {
1196	height: 36px;
1197	line-height: 1;
1198	}
1199	.wc-block-attribute-filter.style-dropdown > svg {
1200	position: absolute;
1201	right: 8px;
1202	top: 50%;
1203	transform: translateY(-50%);
1204	pointer-events: none;
1205	}
1206	.wc-block-attribute-filter .wc-block-attribute-filter-list {
1207	margin: 0;
1208	width: 100%;
1209	}
1210	.wc-block-attribute-filter .wc-block-attribute-filter-list li label {
1211	cursor: pointer;
1212	}
1213	.wc-block-attribute-filter .wc-block-attribute-filter-list li input {
1214	cursor: pointer;
1215	display: inline-block;
1216	}
1217	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper {
1218	flex-grow: 1;
1219	max-width: unset;
1220	width: 0;
1221	height: -moz-max-content;
1222	height: max-content;
1223	}
1224	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper:not(.is-loading) {
1225	border: 1px solid #757575 !important;
1226	border-radius: 4px;
1227	}
1228	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper.is-loading {
1229	border-radius: 0.25em;
1230	}
1231	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field {
1232	border-radius: inherit;
1233	}
1234	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
1235	font-family: inherit;
1236	font-size: inherit;
1237	font-style: inherit;
1238	font-weight: inherit;
1239	letter-spacing: inherit;
1240	line-height: inherit;
1241	text-decoration: inherit;
1242	text-transform: inherit;
1243	border: 0;
1244	padding: 8px;
1245	border-radius: inherit;
1246	}
1247	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input {
1248	font-size: 0.875em;
1249	}
1250	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input::-moz-placeholder {
1251	color: #000;
1252	}
1253	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input:-ms-input-placeholder {
1254	color: #000;
1255	}
1256	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input::placeholder {
1257	color: #000;
1258	}
1259	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestions-list {
1260	border: 1px solid #757575;
1261	border-radius: 4px;
1262	margin-top: 8px;
1263	max-height: 21em;
1264	}
1265	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestions-list .components-form-token-field__suggestion {
1266	color: #000;
1267	border: 1px solid #ccc;
1268	border-radius: 4px;
1269	margin: 12px;
1270	padding: 12px;
1271	}
1272	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__token,
1273	.wc-block-attribute-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestion {
1274	font-size: 0.875em;
1275	}
1276
1277	.wc-block-attribute-filter__multiple-toggle,
1278	.wc-block-attribute-filter__conditions-toggle,
1279	.wc-block-attribute-filter__display-toggle {
1280	width: 100%;
1281	}
1282
1283	.wc-block-attribute-filter__instructions {
1284	padding-bottom: 1em;
1285	border-bottom: 1px solid #f0f0f0;
1286	}
1287
1288	.wc-block-attribute-filter__selection {
1289	padding-top: 1em;
1290	}
1291
1292	.woocommerce-product-attributes .woocommerce-search-list__search .components-base-control__label {
1293	font-family: inherit;
1294	font-size: inherit;
1295	font-style: inherit;
1296	font-weight: inherit;
1297	letter-spacing: inherit;
1298	line-height: inherit;
1299	text-decoration: inherit;
1300	text-transform: inherit;
1301	font-size: 1em;
1302	color: #757575;
1303	}
1304
1305	.wc-block-attribute-filter__actions {
1306	align-items: center;
1307	display: flex;
1308	gap: 16px;
1309	justify-content: flex-end;
1310	}
1311	.wc-block-attribute-filter__actions .wc-block-components-filter-submit-button {
1312	margin-left: 0;
1313	}
1314	.wc-block-attribute-filter__actions .wc-block-components-filter-submit-button:disabled {
1315	opacity: 0.6;
1316	cursor: auto;
1317	}
1318	.wc-block-attribute-filter__actions .wc-block-filter-submit-button.wc-block-components-filter-submit-button.wc-block-attribute-filter__button {
1319	margin-top: 0;
1320	font-size: 0.875em;
1321	}
1322
1323	.editor-styles-wrapper .wc-block-components-checkbox {
1324	margin-top: 1em;
1325	}
1326
1327	.wc-block-components-checkbox {
1328	margin-top: 1em;
1329	}
1330
1331	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
1332	padding: 4px 30px 4px 8px;
1333	}
1334	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container .components-form-token-field__token-text {
1335	background-color: #fff;
1336	border: 1px solid;
1337	border-right: 0;
1338	border-radius: 25px 0 0 25px;
1339	padding: 0.25em 0.5em 0.25em 0.75em;
1340	line-height: 22px;
1341	}
1342	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container > .components-form-token-field__input {
1343	margin: 0.25em 0;
1344	}
1345	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container .components-button.components-form-token-field__remove-token {
1346	background-color: #fff;
1347	border: 1px solid;
1348	border-left: 0;
1349	border-radius: 0 25px 25px 0;
1350	padding: 1px 0.25em 0 0;
1351	}
1352	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container .components-button.components-form-token-field__remove-token.has-icon svg {
1353	background-color: #e0e0e0;
1354	border-radius: 25px;
1355	}
1356
1357	.editor-styles-wrapper .wc-block-attribute-filter__button.wc-block-attribute-filter__button,
1358	.wc-block-attribute-filter__button.wc-block-attribute-filter__button {
1359	padding: 0.5em 1em;
1360	font-size: 0.875em;
1361	height: -moz-max-content;
1362	height: max-content;
1363	width: -moz-max-content;
1364	width: max-content;
1365	}
1366	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
1367	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/block-error-boundary/style.scss *!
1368	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
1369	/**
1370	* Converts a hex value into the rgb equivalent.
1371	*
1372	* @param {string} hex - the hexadecimal value to convert
1373	* @return {string} comma separated rgb values
1374	*/
1375	/**
1376	* Colors
1377	*/
1378	/**
1379	* SCSS Variables.
1380	*
1381	* Please use variables from this sheet to ensure consistency across the UI.
1382	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1383	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1384	*/
1385	/**
1386	* Converts a hex value into the rgb equivalent.
1387	*
1388	* @param {string} hex - the hexadecimal value to convert
1389	* @return {string} comma separated rgb values
1390	*/
1391	/**
1392	* Colors
1393	*/
1394	/**
1395	* Fonts & basic variables.
1396	*/
1397	/**
1398	* Grid System.
1399	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
1400	*/
1401	/**
1402	* Dimensions.
1403	*/
1404	/**
1405	* Shadows.
1406	*/
1407	/**
1408	* Editor widths.
1409	*/
1410	/**
1411	* Block & Editor UI.
1412	*/
1413	/**
1414	* Block paddings.
1415	*/
1416	/**
1417	* React Native specific.
1418	* These variables do not appear to be used anywhere else.
1419	*/
1420	/* stylelint-disable block-closing-brace-newline-after */
1421	/* stylelint-enable */
1422	@keyframes spinner__animation {
1423	0% {
1424	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
1425	transform: rotate(0deg);
1426	}
1427	100% {
1428	transform: rotate(360deg);
1429	}
1430	}
1431	@keyframes loading__animation {
1432	100% {
1433	transform: translateX(100%);
1434	}
1435	}
1436	.wc-block-components-error {
1437	display: flex;
1438	padding: 48px 0;
1439	margin: 48px 0;
1440	align-items: center;
1441	justify-content: center;
1442	flex-direction: column;
1443	color: #757575;
1444	text-align: center;
1445	}
1446
1447	.wc-block-components-error__header {
1448	font-size: 2em;
1449	margin: 0;
1450	color: #646970;
1451	}
1452
1453	.wc-block-components-error__image {
1454	width: 25%;
1455	margin: 0 0 24px 0;
1456	}
1457
1458	.wc-block-components-error__text {
1459	margin: 1em 0 0;
1460	color: #8c8f94;
1461	font-size: 1.25em;
1462	max-width: 60ch;
1463	}
1464
1465	.wc-block-components-error__message {
1466	margin: 1em auto 0;
1467	font-style: italic;
1468	color: #8c8f94;
1469	max-width: 60ch;
1470	}
1471
1472	.wc-block-error__button {
1473	margin: 48px 0 0 0;
1474	}
1475
1476	/# sourceMappingURL=attribute-filter.css.map/