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

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

woocommerce / assets / client / blocks Last commit date

collection-attribute-filter.css

966 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/blocks/collection-filters/inner-blocks/attribute-filter/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	.editor-styles-wrapper .wc-block-components-checkbox-list,
72	.wc-block-components-checkbox-list {
73	margin: 0;
74	padding: 0;
75	list-style: none outside;
76	}
77	.editor-styles-wrapper .wc-block-components-checkbox-list li,
78	.wc-block-components-checkbox-list li {
79	margin: 0 0 4px;
80	padding: 0;
81	list-style: none outside;
82	}
83	.editor-styles-wrapper .wc-block-components-checkbox-list li.show-more button,
84	.editor-styles-wrapper .wc-block-components-checkbox-list li.show-less button,
85	.wc-block-components-checkbox-list li.show-more button,
86	.wc-block-components-checkbox-list li.show-less button {
87	background: none;
88	border: none;
89	padding: 0;
90	text-decoration: underline;
91	cursor: pointer;
92	}
93	.editor-styles-wrapper .wc-block-components-checkbox-list.is-loading li,
94	.wc-block-components-checkbox-list.is-loading li {
95	outline: 0 !important;
96	border: 0 !important;
97	background-color: currentColor !important;
98	color: currentColor !important;
99	width: 100%;
100	border-radius: 0.25rem;
101	display: block;
102	line-height: 1;
103	position: relative !important;
104	overflow: hidden !important;
105	max-width: 100% !important;
106	pointer-events: none;
107	box-shadow: none;
108	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
109	opacity: 0.15;
110	}
111	.editor-styles-wrapper .wc-block-components-checkbox-list.is-loading li > *,
112	.wc-block-components-checkbox-list.is-loading li > * {
113	visibility: hidden;
114	}
115	.editor-styles-wrapper .wc-block-components-checkbox-list.is-loading li::after,
116	.wc-block-components-checkbox-list.is-loading li::after {
117	content: " ";
118	display: block;
119	position: absolute;
120	left: 0;
121	right: 0;
122	top: 0;
123	height: 100%;
124	background-repeat: no-repeat;
125	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
126	transform: translateX(-100%);
127	animation: loading__animation 1.5s ease-in-out infinite;
128	}
129	@media screen and (prefers-reduced-motion: reduce) {
130	.editor-styles-wrapper .wc-block-components-checkbox-list.is-loading li,
131	.wc-block-components-checkbox-list.is-loading li {
132	animation: none;
133	}
134	}
135
136	.wc-block-components-checkbox {
137	color: inherit;
138	font-family: inherit;
139	font-size: inherit;
140	font-style: inherit;
141	font-weight: inherit;
142	letter-spacing: inherit;
143	line-height: inherit;
144	text-decoration: inherit;
145	text-transform: inherit;
146	margin-top: 1em;
147	}
148	.wc-block-components-checkbox label {
149	align-items: flex-start;
150	display: flex;
151	position: relative;
152	cursor: pointer;
153	font-size: 0.875em;
154	margin-bottom: 0 !important;
155	}
156	.wc-block-components-checkbox label input[type=checkbox] {
157	cursor: inherit;
158	}
159	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
160	font-size: 1em;
161	-moz-appearance: none;
162	appearance: none;
163	border: 1px solid rgba(25, 23, 17, 0.48);
164	border-radius: 4px;
165	box-sizing: border-box;
166	height: 1.5em;
167	width: 1.5em;
168	margin: 0;
169	margin-right: 1em;
170	min-height: 1.5em;
171	min-width: 1.5em;
172	overflow: hidden;
173	position: static;
174	vertical-align: middle;
175	background-color: #fff;
176	}
177	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
178	background: #fff;
179	}
180	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus {
181	outline: 1px solid rgba(17, 17, 17, 0.8);
182	outline-offset: 2px;
183	}
184	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]::before, .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]::after {
185	content: "";
186	}
187	.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:not(:checked) + .wc-block-components-checkbox__mark {
188	display: none;
189	}
190	.has-dark-controls .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
191	border-color: rgba(255, 255, 255, 0.6);
192	background-color: rgba(0, 0, 0, 0.1);
193	}
194	.has-dark-controls .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
195	background: rgba(0, 0, 0, 0.1);
196	border-color: rgba(255, 255, 255, 0.6);
197	}
198	.has-dark-controls .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus {
199	outline: 2px solid rgba(255, 255, 255, 0.6);
200	outline-offset: 2px;
201	}
202	.wc-block-components-checkbox.has-error {
203	color: #cc1818;
204	}
205	.wc-block-components-checkbox.has-error a {
206	color: #cc1818;
207	}
208	.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input, .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:hover, .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus, .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:active {
209	border-color: #cc1818;
210	}
211	.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus {
212	outline: 2px solid #cc1818;
213	outline-offset: 2px;
214	}
215	.wc-block-components-checkbox .wc-block-components-checkbox__mark {
216	fill: #000;
217	position: absolute;
218	margin-left: 0.1875em;
219	margin-top: 0.0625em;
220	width: 1.125em;
221	height: 1.125em;
222	pointer-events: none;
223	}
224	.has-dark-controls .wc-block-components-checkbox .wc-block-components-checkbox__mark {
225	fill: #fff;
226	}
227	.wc-block-components-checkbox > span,
228	.wc-block-components-checkbox .wc-block-components-checkbox__label {
229	vertical-align: middle;
230	line-height: 1.5em;
231	}
232
233	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
234	.wc-block-components-checkbox__mark {
235	display: none;
236	}
237	}
238	.theme-twentytwentyone .wc-block-components-checkbox__input[type=checkbox],
239	.theme-twentytwentyone .has-dark-controls .wc-block-components-checkbox__input[type=checkbox] {
240	background-color: #fff;
241	border-color: var(--form--border-color);
242	position: relative;
243	}
244	.theme-twentytwentyone .wc-block-components-checkbox__input[type=checkbox]:checked,
245	.theme-twentytwentyone .has-dark-controls .wc-block-components-checkbox__input[type=checkbox]:checked {
246	background-color: #fff;
247	border-color: var(--form--border-color);
248	}
249	.theme-twentytwentyone .wc-block-components-checkbox__mark {
250	display: none;
251	}
252
253	.wp-block-woocommerce-collection-attribute-filter .style-dropdown {
254	position: relative;
255	}
256	.wp-block-woocommerce-collection-attribute-filter .style-dropdown > svg {
257	position: absolute;
258	right: 8px;
259	top: 50%;
260	transform: translateY(-50%);
261	pointer-events: none;
262	}
263	/!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
264	!* 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 *!
265	\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
266	/**
267	* Converts a hex value into the rgb equivalent.
268	*
269	* @param {string} hex - the hexadecimal value to convert
270	* @return {string} comma separated rgb values
271	*/
272	/**
273	* Colors
274	*/
275	/**
276	* SCSS Variables.
277	*
278	* Please use variables from this sheet to ensure consistency across the UI.
279	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
280	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
281	*/
282	/**
283	* Converts a hex value into the rgb equivalent.
284	*
285	* @param {string} hex - the hexadecimal value to convert
286	* @return {string} comma separated rgb values
287	*/
288	/**
289	* Colors
290	*/
291	/**
292	* Fonts & basic variables.
293	*/
294	/**
295	* Grid System.
296	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
297	*/
298	/**
299	* Dimensions.
300	*/
301	/**
302	* Shadows.
303	*/
304	/**
305	* Editor widths.
306	*/
307	/**
308	* Block & Editor UI.
309	*/
310	/**
311	* Block paddings.
312	*/
313	/**
314	* React Native specific.
315	* These variables do not appear to be used anywhere else.
316	*/
317	/* stylelint-disable block-closing-brace-newline-after */
318	/* stylelint-enable */
319	@keyframes spinner__animation {
320	0% {
321	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
322	transform: rotate(0deg);
323	}
324	100% {
325	transform: rotate(360deg);
326	}
327	}
328	@keyframes loading__animation {
329	100% {
330	transform: translateX(100%);
331	}
332	}
333	.wc-blocks-components-form-token-field-wrapper {
334	/* stylelint-disable no-invalid-position-at-import-rule */
335	/**
336	* Breakpoints & Media Queries
337	*/
338	/**
339	* Converts a hex value into the rgb equivalent.
340	*
341	* @param {string} hex - the hexadecimal value to convert
342	* @return {string} comma separated rgb values
343	*/
344	/**
345	* Long content fade mixin
346	*
347	* Creates a fading overlay to signify that the content is longer
348	* than the space allows.
349	*/
350	/**
351	* Breakpoint mixins
352	*/
353	/**
354	* Focus styles.
355	*/
356	/**
357	* Applies editor left position to the selector passed as argument
358	*/
359	/**
360	* Styles that are reused verbatim in a few places
361	*/
362	/**
363	* Allows users to opt-out of animations via OS-level preferences.
364	*/
365	/**
366	* Reset default styles for JavaScript UI based pages.
367	* This is a WP-admin agnostic reset
368	*/
369	/**
370	* Reset the WP Admin page styles for Gutenberg-like pages.
371	*/
372	/!rtl:begin:ignore/
373	/!rtl:end:ignore/
374	/* stylelint-enable no-invalid-position-at-import-rule */
375	}
376	.wc-blocks-components-form-token-field-wrapper .components-popover {
377	position: fixed;
378	z-index: z-index(".components-popover");
379	top: 0;
380	left: 0;
381	opacity: 0;
382	}
383	.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] {
384	opacity: 1;
385	}
386	.wc-blocks-components-form-token-field-wrapper .components-popover.is-expanded {
387	top: 0;
388	left: 0;
389	right: 0;
390	bottom: 0;
391	z-index: z-index(".components-popover") !important;
392	}
393	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow) {
394	margin-left: 2px;
395	}
396	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::before {
397	border: 8px solid #ccc;
398	}
399	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow).is-alternate::before {
400	border-color: #1e1e1e;
401	}
402	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::after {
403	border: 8px solid #fff;
404	}
405	.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 {
406	content: "";
407	position: absolute;
408	height: 0;
409	width: 0;
410	line-height: 0;
411	}
412	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top] {
413	margin-top: -8px;
414	}
415	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
416	bottom: -8px;
417	}
418	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
419	bottom: -6px;
420	}
421	.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 {
422	border-bottom: none;
423	border-left-color: transparent;
424	border-right-color: transparent;
425	border-top-style: solid;
426	margin-left: -10px;
427	}
428	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
429	margin-top: 8px;
430	}
431	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
432	top: -8px;
433	}
434	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
435	top: -6px;
436	}
437	.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 {
438	border-bottom-style: solid;
439	border-left-color: transparent;
440	border-right-color: transparent;
441	border-top: none;
442	margin-left: -10px;
443	}
444	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
445	margin-left: -8px;
446	}
447	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
448	right: -8px;
449	}
450	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
451	right: -6px;
452	}
453	.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 {
454	border-bottom-color: transparent;
455	border-left-style: solid;
456	border-right: none;
457	border-top-color: transparent;
458	}
459	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
460	margin-left: 8px;
461	}
462	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
463	left: -8px;
464	}
465	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
466	left: -6px;
467	}
468	.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 {
469	border-bottom-color: transparent;
470	border-left: none;
471	border-right-style: solid;
472	border-top-color: transparent;
473	}
474	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=top] {
475	bottom: 100%;
476	}
477	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=bottom] {
478	top: 100%;
479	}
480	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=middle] {
481	align-items: center;
482	display: flex;
483	}
484	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-top {
485	margin-top: 12px;
486	}
487	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-bottom {
488	margin-top: -12px;
489	}
490	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {
491	margin-left: 12px;
492	}
493	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
494	margin-right: 12px;
495	}
496	.wc-blocks-components-form-token-field-wrapper .components-popover__content {
497	height: 100%;
498	background: #fff;
499	border: 1px solid #ccc;
500	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);
501	border-radius: 2px;
502	}
503	.is-alternate .wc-blocks-components-form-token-field-wrapper .components-popover__content {
504	border: 1px solid #1e1e1e;
505	box-shadow: none;
506	}
507	.components-popover .wc-blocks-components-form-token-field-wrapper .components-popover__content {
508	position: absolute;
509	height: auto;
510	overflow-y: auto;
511	}
512	.components-popover.is-expanded .wc-blocks-components-form-token-field-wrapper .components-popover__content {
513	position: static;
514	height: calc(100% - 48px);
515	overflow-y: visible;
516	min-width: auto;
517	border: none;
518	border-top: 1px solid #1e1e1e;
519	}
520	.components-popover[data-y-axis=top] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
521	bottom: 100%;
522	}
523	.components-popover[data-x-axis=center] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
524	left: 50%;
525	transform: translateX(-50%);
526	}
527	.components-popover[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
528	position: absolute;
529	left: 100%;
530	}
531	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
532	margin-left: -25px;
533	}
534	.components-popover[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
535	position: absolute;
536	right: 100%;
537	}
538	.components-popover:not([data-y-axis=middle])[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
539	margin-right: -25px;
540	}
541	.wc-blocks-components-form-token-field-wrapper .components-popover__header {
542	align-items: center;
543	background: #fff;
544	display: flex;
545	height: 48px;
546	justify-content: space-between;
547	padding: 0 8px 0 16px;
548	}
549	.wc-blocks-components-form-token-field-wrapper .components-popover__header-title {
550	overflow: hidden;
551	text-overflow: ellipsis;
552	white-space: nowrap;
553	width: 100%;
554	}
555	.wc-blocks-components-form-token-field-wrapper .components-popover__close.components-button {
556	z-index: z-index(".components-popover__close");
557	}
558	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover {
559	z-index: z-index(".components-tooltip");
560	}
561	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover .components-popover__content {
562	min-width: 0;
563	}
564	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content {
565	background: #1e1e1e;
566	border-radius: 2px;
567	border-width: 0;
568	color: #fff;
569	white-space: nowrap;
570	text-align: center;
571	line-height: 1.4;
572	font-size: 12px;
573	box-shadow: none;
574	}
575	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content > div {
576	padding: 4px 8px;
577	}
578	.wc-blocks-components-form-token-field-wrapper .components-tooltip__shortcut {
579	display: inline-block;
580	margin-left: 8px;
581	}
582	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper {
583	position: relative;
584	}
585	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper .event-catcher {
586	z-index: z-index(".components-tooltip .event-catcher");
587	position: absolute;
588	width: 100%;
589	height: 100%;
590	top: 0;
591	left: 0;
592	bottom: 0;
593	right: 0;
594	}
595	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
596	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
597	padding: 6px 8px;
598	box-shadow: 0 0 0 transparent;
599	transition: box-shadow 0.1s linear;
600	border-radius: 2px;
601	border: 1px solid #949494;
602	/* Fonts smaller than 16px causes mobile safari to zoom. */
603	font-size: 16px;
604	/* Override core line-height. To be reviewed. */
605	line-height: normal;
606	display: flex;
607	flex-wrap: wrap;
608	align-items: center;
609	width: 100%;
610	margin: 0 0 8px 0;
611	padding: 2px 4px;
612	cursor: text;
613	}
614	@media (prefers-reduced-motion: reduce) {
615	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
616	transition-duration: 0s;
617	transition-delay: 0s;
618	}
619	}
620	@media (min-width: 600px) {
621	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
622	font-size: 13px;
623	/* Override core line-height. To be reviewed. */
624	line-height: normal;
625	}
626	}
627	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:focus {
628	border-color: var(--wp-admin-theme-color);
629	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
630	outline: 2px solid transparent;
631	}
632	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-webkit-input-placeholder {
633	color: rgba(30, 30, 30, 0.62);
634	}
635	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-moz-placeholder {
636	opacity: 1;
637	color: rgba(30, 30, 30, 0.62);
638	}
639	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:-ms-input-placeholder {
640	color: rgba(30, 30, 30, 0.62);
641	}
642	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-disabled {
643	background: #ddd;
644	border-color: #ddd;
645	}
646	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-active {
647	border-color: var(--wp-admin-theme-color);
648	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
649	outline: 2px solid transparent;
650	}
651	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
652	display: inline-block;
653	flex: 1;
654	font-size: 16px;
655	width: 100%;
656	max-width: 100%;
657	margin-left: 4px;
658	padding: 0;
659	min-height: 24px;
660	min-width: 50px;
661	background: inherit;
662	border: 0;
663	color: #1e1e1e;
664	box-shadow: none;
665	}
666	@media (min-width: 600px) {
667	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
668	font-size: 13px;
669	}
670	}
671	.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 {
672	outline: none;
673	box-shadow: none;
674	}
675	.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 {
676	width: auto;
677	}
678	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
679	display: inline-block;
680	margin-bottom: 4px;
681	}
682	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__help {
683	font-size: 12px;
684	font-style: normal;
685	color: #757575;
686	}
687	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token {
688	font-size: 13px;
689	display: flex;
690	margin: 2px 4px 2px 0;
691	color: #1e1e1e;
692	max-width: 100%;
693	}
694	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__token-text,
695	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__remove-token {
696	background: #4ab866;
697	}
698	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__token-text,
699	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__remove-token {
700	background: #cc1818;
701	}
702	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__token-text,
703	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
704	color: #757575;
705	}
706	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless {
707	position: relative;
708	padding: 0 16px 0 0;
709	}
710	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
711	background: transparent;
712	color: var(--wp-admin-theme-color);
713	}
714	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
715	background: transparent;
716	color: #757575;
717	position: absolute;
718	top: 1px;
719	right: 0;
720	}
721	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
722	color: #4ab866;
723	}
724	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
725	color: #cc1818;
726	border-radius: 4px 0 0 4px;
727	padding: 0 4px 0 6px;
728	}
729	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
730	color: #1e1e1e;
731	}
732	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
733	cursor: default;
734	}
735	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
736	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
737	display: inline-block;
738	line-height: 24px;
739	height: auto;
740	background: #ddd;
741	min-width: unset;
742	transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
743	}
744	@media (prefers-reduced-motion: reduce) {
745	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
746	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
747	transition-duration: 0s;
748	transition-delay: 0s;
749	animation-duration: 1ms;
750	animation-delay: 0s;
751	}
752	}
753	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
754	border-radius: 2px 0 0 2px;
755	padding: 0 0 0 8px;
756	white-space: nowrap;
757	overflow: hidden;
758	text-overflow: ellipsis;
759	}
760	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
761	cursor: pointer;
762	border-radius: 0 2px 2px 0;
763	padding: 0 2px;
764	color: #1e1e1e;
765	line-height: 10px;
766	overflow: initial;
767	}
768	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button:hover {
769	color: #1e1e1e;
770	}
771	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
772	flex: 1 0 100%;
773	min-width: 100%;
774	max-height: 9em;
775	overflow-y: auto;
776	transition: all 0.15s ease-in-out;
777	list-style: none;
778	border-top: 1px solid #757575;
779	margin: 4px -4px -4px;
780	padding: 0;
781	}
782	@media (prefers-reduced-motion: reduce) {
783	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
784	transition-duration: 0s;
785	transition-delay: 0s;
786	}
787	}
788	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
789	color: #757575;
790	display: block;
791	font-size: 13px;
792	padding: 4px 8px;
793	margin: 0;
794	cursor: pointer;
795	}
796	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
797	background: var(--wp-admin-theme-color);
798	color: #fff;
799	}
800	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion-match {
801	text-decoration: underline;
802	}
803
804	.wc-blocks-components-form-token-field-wrapper {
805	border-color: #949494;
806	}
807	.wc-blocks-components-form-token-field-wrapper .components-visually-hidden,
808	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
809	border: 0;
810	clip: rect(1px, 1px, 1px, 1px);
811	clip-path: inset(50%);
812	height: 1px;
813	width: 1px;
814	margin: -1px;
815	overflow: hidden;
816	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
817	overflow-wrap: normal !important;
818	word-wrap: normal !important;
819	padding: 0;
820	position: absolute !important;
821	}
822	.wc-blocks-components-form-token-field-wrapper .components-form-token-field,
823	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
824	border-color: inherit;
825	box-sizing: border-box;
826	margin-bottom: 0;
827	}
828	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
829	background-color: #fff;
830	border-radius: 0;
831	box-shadow: none;
832	color: #000;
833	position: relative;
834	}
835	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
836	min-height: 30px;
837	}
838	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button,
839	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
840	background: #e0e0e0;
841	}
842	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token {
843	border: none;
844	}
845	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
846	background-color: #fff;
847	border: 1px solid #949494;
848	border-width: 0 1px 1px;
849	left: -1px;
850	margin: 1px 0 0;
851	position: absolute;
852	right: -1px;
853	top: 100%;
854	z-index: 50;
855	}
856	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list:empty {
857	display: none;
858	}
859	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
860	padding: 8px;
861	}
862	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
863	background: #f0f0f0;
864	color: #2f2f2f;
865	}
866	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token {
867	margin-right: 0;
868	position: relative;
869	width: 100%;
870	z-index: 1;
871	}
872	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__remove-token.components-button,
873	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
874	background: transparent;
875	}
876	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
877	padding-left: 4px;
878	width: 100%;
879	}
880	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token + input[type=text].components-form-token-field__input {
881	position: absolute;
882	}
883	.wc-blocks-components-form-token-field-wrapper.single-selection .is-active .components-form-token-field__token + input[type=text].components-form-token-field__input {
884	border: 1px solid #949494;
885	margin: 0 2px 4px;
886	padding: 0 5px;
887	position: static;
888	}
889	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
890	!* 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 *!
891	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
892	/**
893	* Converts a hex value into the rgb equivalent.
894	*
895	* @param {string} hex - the hexadecimal value to convert
896	* @return {string} comma separated rgb values
897	*/
898	/**
899	* Colors
900	*/
901	/**
902	* SCSS Variables.
903	*
904	* Please use variables from this sheet to ensure consistency across the UI.
905	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
906	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
907	*/
908	/**
909	* Converts a hex value into the rgb equivalent.
910	*
911	* @param {string} hex - the hexadecimal value to convert
912	* @return {string} comma separated rgb values
913	*/
914	/**
915	* Colors
916	*/
917	/**
918	* Fonts & basic variables.
919	*/
920	/**
921	* Grid System.
922	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
923	*/
924	/**
925	* Dimensions.
926	*/
927	/**
928	* Shadows.
929	*/
930	/**
931	* Editor widths.
932	*/
933	/**
934	* Block & Editor UI.
935	*/
936	/**
937	* Block paddings.
938	*/
939	/**
940	* React Native specific.
941	* These variables do not appear to be used anywhere else.
942	*/
943	/* stylelint-disable block-closing-brace-newline-after */
944	/* stylelint-enable */
945	@keyframes spinner__animation {
946	0% {
947	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
948	transform: rotate(0deg);
949	}
950	100% {
951	transform: rotate(360deg);
952	}
953	}
954	@keyframes loading__animation {
955	100% {
956	transform: translateX(100%);
957	}
958	}
959	.wc-filter-element-label-list-count::before {
960	content: " (";
961	}
962	.wc-filter-element-label-list-count::after {
963	content: ")";
964	}
965
966	/# sourceMappingURL=collection-attribute-filter.css.map/