collection-stock-filter-rtl.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / collection-stock-filter-rtl.css

woocommerce / assets / client / blocks Last commit date

collection-stock-filter-rtl.css

1152 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/stock-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	right: 0;
121	left: 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-left: 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-right: 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-stock-filter h1,
254	.wp-block-woocommerce-stock-filter h2,
255	.wp-block-woocommerce-stock-filter h3,
256	.wp-block-woocommerce-stock-filter h4,
257	.wp-block-woocommerce-stock-filter h5,
258	.wp-block-woocommerce-stock-filter h6 {
259	text-transform: inherit;
260	}
261
262	.wc-block-stock-filter {
263	margin-bottom: 24px;
264	}
265	.wc-block-stock-filter.is-loading {
266	outline: 0 !important;
267	border: 0 !important;
268	background-color: currentColor !important;
269	color: currentColor !important;
270	width: 100%;
271	border-radius: 0.25rem;
272	display: block;
273	line-height: 1;
274	position: relative !important;
275	overflow: hidden !important;
276	max-width: 100% !important;
277	pointer-events: none;
278	box-shadow: none;
279	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
280	opacity: 0.15;
281	margin-top: 16px;
282	box-shadow: none;
283	border-radius: 0;
284	}
285	.wc-block-stock-filter.is-loading > * {
286	visibility: hidden;
287	}
288	.wc-block-stock-filter.is-loading::after {
289	content: " ";
290	display: block;
291	position: absolute;
292	right: 0;
293	left: 0;
294	top: 0;
295	height: 100%;
296	background-repeat: no-repeat;
297	background-image: linear-gradient(-90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
298	transform: translateX(100%);
299	animation: loading__animation 1.5s ease-in-out infinite;
300	}
301	@media screen and (prefers-reduced-motion: reduce) {
302	.wc-block-stock-filter.is-loading {
303	animation: none;
304	}
305	}
306	.wc-block-stock-filter .wc-block-stock-filter-list {
307	margin: 0;
308	}
309	.wc-block-stock-filter .wc-block-stock-filter-list li label {
310	cursor: pointer;
311	}
312	.wc-block-stock-filter .wc-block-stock-filter-list li input {
313	cursor: pointer;
314	display: inline-block;
315	}
316	.wc-block-stock-filter.style-dropdown {
317	position: relative;
318	display: flex;
319	gap: 16px;
320	align-items: flex-start;
321	}
322	.wc-block-stock-filter.style-dropdown .single-selection .components-form-token-field__token + input[type=text].components-form-token-field__input {
323	opacity: 0;
324	}
325	.wc-block-stock-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 {
326	opacity: 1;
327	}
328	.wc-block-stock-filter.style-dropdown .wc-block-components-filter-submit-button {
329	height: 36px;
330	line-height: 1;
331	}
332	.wc-block-stock-filter.style-dropdown > svg {
333	position: absolute;
334	left: 8px;
335	top: 50%;
336	transform: translateY(-50%);
337	pointer-events: none;
338	}
339	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper {
340	flex-grow: 1;
341	max-width: unset;
342	width: 0;
343	height: -moz-max-content;
344	height: max-content;
345	}
346	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper:not(.is-loading) {
347	border: 1px solid #757575 !important;
348	border-radius: 4px;
349	}
350	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper.is-loading {
351	border-radius: 0.25em;
352	}
353	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field {
354	border-radius: inherit;
355	}
356	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
357	color: inherit;
358	font-family: inherit;
359	font-size: inherit;
360	font-style: inherit;
361	font-weight: inherit;
362	letter-spacing: inherit;
363	line-height: inherit;
364	text-decoration: inherit;
365	text-transform: inherit;
366	border: 0;
367	padding: 8px;
368	border-radius: inherit;
369	}
370	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input {
371	font-size: 0.875em;
372	}
373	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input::-moz-placeholder {
374	color: #000;
375	}
376	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input:-ms-input-placeholder {
377	color: #000;
378	}
379	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__input::placeholder {
380	color: #000;
381	}
382	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestions-list {
383	border: 1px solid #757575;
384	border-radius: 4px;
385	margin-top: 8px;
386	max-height: 21em;
387	}
388	.wc-block-stock-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 {
389	color: #000;
390	border: 1px solid #ccc;
391	border-radius: 4px;
392	margin: 12px;
393	padding: 12px;
394	}
395	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__token,
396	.wc-block-stock-filter .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container .components-form-token-field__suggestion {
397	font-size: 0.875em;
398	}
399	.wc-block-stock-filter .wc-block-components-product-rating {
400	margin-bottom: 0;
401	}
402
403	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
404	padding: 4px 8px 4px 30px;
405	}
406	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container .components-form-token-field__token-text {
407	background-color: #fff;
408	border: 1px solid;
409	border-left: 0;
410	border-radius: 0 25px 25px 0;
411	padding: 0.25em 0.75em 0.25em 0.5em;
412	line-height: 22px;
413	}
414	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container > .components-form-token-field__input {
415	margin: 0.25em 0;
416	}
417	.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container .components-button.components-form-token-field__remove-token {
418	background-color: #fff;
419	border: 1px solid;
420	border-right: 0;
421	border-radius: 25px 0 0 25px;
422	padding: 1px 0 0 0.25em;
423	}
424	.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 {
425	background-color: #e0e0e0;
426	border-radius: 25px;
427	}
428
429	.wc-block-stock-filter__actions {
430	align-items: center;
431	display: flex;
432	gap: 16px;
433	justify-content: flex-end;
434	margin-top: 16px;
435	}
436	.wc-block-stock-filter__actions button[type=submit]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
437	margin-right: 0;
438	margin-top: 0;
439	font-size: 0.875em;
440	}
441	.wc-block-stock-filter__actions .wc-block-stock-filter__button {
442	margin-top: 0.5em;
443	padding: 0.5em 1em;
444	font-size: 0.875em;
445	}
446
447	.editor-styles-wrapper .wc-block-stock-filter .wc-block-stock-filter__button {
448	margin-top: 0.5em;
449	padding: 0.5em 1em;
450	font-size: 0.875em;
451	}
452	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
453	!* 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 *!
454	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
455	/**
456	* Converts a hex value into the rgb equivalent.
457	*
458	* @param {string} hex - the hexadecimal value to convert
459	* @return {string} comma separated rgb values
460	*/
461	/**
462	* Colors
463	*/
464	/**
465	* SCSS Variables.
466	*
467	* Please use variables from this sheet to ensure consistency across the UI.
468	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
469	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
470	*/
471	/**
472	* Converts a hex value into the rgb equivalent.
473	*
474	* @param {string} hex - the hexadecimal value to convert
475	* @return {string} comma separated rgb values
476	*/
477	/**
478	* Colors
479	*/
480	/**
481	* Fonts & basic variables.
482	*/
483	/**
484	* Grid System.
485	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
486	*/
487	/**
488	* Dimensions.
489	*/
490	/**
491	* Shadows.
492	*/
493	/**
494	* Editor widths.
495	*/
496	/**
497	* Block & Editor UI.
498	*/
499	/**
500	* Block paddings.
501	*/
502	/**
503	* React Native specific.
504	* These variables do not appear to be used anywhere else.
505	*/
506	/* stylelint-disable block-closing-brace-newline-after */
507	/* stylelint-enable */
508	@keyframes spinner__animation {
509	0% {
510	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
511	transform: rotate(0deg);
512	}
513	100% {
514	transform: rotate(-360deg);
515	}
516	}
517	@keyframes loading__animation {
518	100% {
519	transform: translateX(-100%);
520	}
521	}
522	.wc-filter-element-label-list-count::before {
523	content: " (";
524	}
525	.wc-filter-element-label-list-count::after {
526	content: ")";
527	}
528	/!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
529	!* 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 *!
530	\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
531	/**
532	* Converts a hex value into the rgb equivalent.
533	*
534	* @param {string} hex - the hexadecimal value to convert
535	* @return {string} comma separated rgb values
536	*/
537	/**
538	* Colors
539	*/
540	/**
541	* SCSS Variables.
542	*
543	* Please use variables from this sheet to ensure consistency across the UI.
544	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
545	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
546	*/
547	/**
548	* Converts a hex value into the rgb equivalent.
549	*
550	* @param {string} hex - the hexadecimal value to convert
551	* @return {string} comma separated rgb values
552	*/
553	/**
554	* Colors
555	*/
556	/**
557	* Fonts & basic variables.
558	*/
559	/**
560	* Grid System.
561	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
562	*/
563	/**
564	* Dimensions.
565	*/
566	/**
567	* Shadows.
568	*/
569	/**
570	* Editor widths.
571	*/
572	/**
573	* Block & Editor UI.
574	*/
575	/**
576	* Block paddings.
577	*/
578	/**
579	* React Native specific.
580	* These variables do not appear to be used anywhere else.
581	*/
582	/* stylelint-disable block-closing-brace-newline-after */
583	/* stylelint-enable */
584	@keyframes spinner__animation {
585	0% {
586	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
587	transform: rotate(0deg);
588	}
589	100% {
590	transform: rotate(-360deg);
591	}
592	}
593	@keyframes loading__animation {
594	100% {
595	transform: translateX(-100%);
596	}
597	}
598	.wc-blocks-components-form-token-field-wrapper {
599	/* stylelint-disable no-invalid-position-at-import-rule */
600	/**
601	* Breakpoints & Media Queries
602	*/
603	/**
604	* Converts a hex value into the rgb equivalent.
605	*
606	* @param {string} hex - the hexadecimal value to convert
607	* @return {string} comma separated rgb values
608	*/
609	/**
610	* Long content fade mixin
611	*
612	* Creates a fading overlay to signify that the content is longer
613	* than the space allows.
614	*/
615	/**
616	* Breakpoint mixins
617	*/
618	/**
619	* Focus styles.
620	*/
621	/**
622	* Applies editor left position to the selector passed as argument
623	*/
624	/**
625	* Styles that are reused verbatim in a few places
626	*/
627	/**
628	* Allows users to opt-out of animations via OS-level preferences.
629	*/
630	/**
631	* Reset default styles for JavaScript UI based pages.
632	* This is a WP-admin agnostic reset
633	*/
634	/**
635	* Reset the WP Admin page styles for Gutenberg-like pages.
636	*/
637	/* stylelint-enable no-invalid-position-at-import-rule */
638	}
639	.wc-blocks-components-form-token-field-wrapper .components-popover {
640	position: fixed;
641	z-index: z-index(".components-popover");
642	top: 0;
643	right: 0;
644	opacity: 0;
645	}
646	.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] {
647	opacity: 1;
648	}
649	.wc-blocks-components-form-token-field-wrapper .components-popover.is-expanded {
650	top: 0;
651	right: 0;
652	left: 0;
653	bottom: 0;
654	z-index: z-index(".components-popover") !important;
655	}
656	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow) {
657	margin-right: 2px;
658	}
659	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::before {
660	border: 8px solid #ccc;
661	}
662	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow).is-alternate::before {
663	border-color: #1e1e1e;
664	}
665	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)::after {
666	border: 8px solid #fff;
667	}
668	.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 {
669	content: "";
670	position: absolute;
671	height: 0;
672	width: 0;
673	line-height: 0;
674	}
675	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top] {
676	margin-top: -8px;
677	}
678	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
679	bottom: -8px;
680	}
681	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
682	bottom: -6px;
683	}
684	.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 {
685	border-bottom: none;
686	border-right-color: transparent;
687	border-left-color: transparent;
688	border-top-style: solid;
689	margin-right: -10px;
690	}
691	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
692	margin-top: 8px;
693	}
694	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
695	top: -8px;
696	}
697	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
698	top: -6px;
699	}
700	.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 {
701	border-bottom-style: solid;
702	border-right-color: transparent;
703	border-left-color: transparent;
704	border-top: none;
705	margin-right: -10px;
706	}
707	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
708	margin-right: -8px;
709	}
710	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
711	left: -8px;
712	}
713	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
714	left: -6px;
715	}
716	.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 {
717	border-bottom-color: transparent;
718	border-right-style: solid;
719	border-left: none;
720	border-top-color: transparent;
721	}
722	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
723	margin-right: 8px;
724	}
725	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
726	right: -8px;
727	}
728	.wc-blocks-components-form-token-field-wrapper .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
729	right: -6px;
730	}
731	.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 {
732	border-bottom-color: transparent;
733	border-right: none;
734	border-left-style: solid;
735	border-top-color: transparent;
736	}
737	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=top] {
738	bottom: 100%;
739	}
740	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=bottom] {
741	top: 100%;
742	}
743	.wc-blocks-components-form-token-field-wrapper .components-popover[data-y-axis=middle] {
744	align-items: center;
745	display: flex;
746	}
747	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-top {
748	margin-top: 12px;
749	}
750	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-bottom {
751	margin-top: -12px;
752	}
753	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {
754	margin-right: 12px;
755	}
756	.wc-blocks-components-form-token-field-wrapper .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
757	margin-left: 12px;
758	}
759	.wc-blocks-components-form-token-field-wrapper .components-popover__content {
760	height: 100%;
761	background: #fff;
762	border: 1px solid #ccc;
763	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);
764	border-radius: 2px;
765	}
766	.is-alternate .wc-blocks-components-form-token-field-wrapper .components-popover__content {
767	border: 1px solid #1e1e1e;
768	box-shadow: none;
769	}
770	.components-popover .wc-blocks-components-form-token-field-wrapper .components-popover__content {
771	position: absolute;
772	height: auto;
773	overflow-y: auto;
774	}
775	.components-popover.is-expanded .wc-blocks-components-form-token-field-wrapper .components-popover__content {
776	position: static;
777	height: calc(100% - 48px);
778	overflow-y: visible;
779	min-width: auto;
780	border: none;
781	border-top: 1px solid #1e1e1e;
782	}
783	.components-popover[data-y-axis=top] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
784	bottom: 100%;
785	}
786	.components-popover[data-x-axis=center] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
787	right: 50%;
788	transform: translateX(50%);
789	}
790	.components-popover[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
791	position: absolute;
792	right: 100%;
793	}
794	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
795	margin-right: -25px;
796	}
797	.components-popover[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
798	position: absolute;
799	left: 100%;
800	}
801	.components-popover:not([data-y-axis=middle])[data-x-axis=left] .wc-blocks-components-form-token-field-wrapper .components-popover__content {
802	margin-left: -25px;
803	}
804	.wc-blocks-components-form-token-field-wrapper .components-popover__header {
805	align-items: center;
806	background: #fff;
807	display: flex;
808	height: 48px;
809	justify-content: space-between;
810	padding: 0 16px 0 8px;
811	}
812	.wc-blocks-components-form-token-field-wrapper .components-popover__header-title {
813	overflow: hidden;
814	text-overflow: ellipsis;
815	white-space: nowrap;
816	width: 100%;
817	}
818	.wc-blocks-components-form-token-field-wrapper .components-popover__close.components-button {
819	z-index: z-index(".components-popover__close");
820	}
821	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover {
822	z-index: z-index(".components-tooltip");
823	}
824	.wc-blocks-components-form-token-field-wrapper .components-tooltip.components-popover .components-popover__content {
825	min-width: 0;
826	}
827	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content {
828	background: #1e1e1e;
829	border-radius: 2px;
830	border-width: 0;
831	color: #fff;
832	white-space: nowrap;
833	text-align: center;
834	line-height: 1.4;
835	font-size: 12px;
836	box-shadow: none;
837	}
838	.wc-blocks-components-form-token-field-wrapper .components-tooltip .components-popover__content > div {
839	padding: 4px 8px;
840	}
841	.wc-blocks-components-form-token-field-wrapper .components-tooltip__shortcut {
842	display: inline-block;
843	margin-right: 8px;
844	}
845	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper {
846	position: relative;
847	}
848	.wc-blocks-components-form-token-field-wrapper .disabled-element-wrapper .event-catcher {
849	z-index: z-index(".components-tooltip .event-catcher");
850	position: absolute;
851	width: 100%;
852	height: 100%;
853	top: 0;
854	right: 0;
855	bottom: 0;
856	left: 0;
857	}
858	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
859	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
860	padding: 6px 8px;
861	box-shadow: 0 0 0 transparent;
862	transition: box-shadow 0.1s linear;
863	border-radius: 2px;
864	border: 1px solid #949494;
865	/* Fonts smaller than 16px causes mobile safari to zoom. */
866	font-size: 16px;
867	/* Override core line-height. To be reviewed. */
868	line-height: normal;
869	display: flex;
870	flex-wrap: wrap;
871	align-items: center;
872	width: 100%;
873	margin: 0 0 8px 0;
874	padding: 2px 4px;
875	cursor: text;
876	}
877	@media (prefers-reduced-motion: reduce) {
878	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
879	transition-duration: 0s;
880	transition-delay: 0s;
881	}
882	}
883	@media (min-width: 600px) {
884	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
885	font-size: 13px;
886	/* Override core line-height. To be reviewed. */
887	line-height: normal;
888	}
889	}
890	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:focus {
891	border-color: var(--wp-admin-theme-color);
892	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
893	outline: 2px solid transparent;
894	}
895	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-webkit-input-placeholder {
896	color: rgba(30, 30, 30, 0.62);
897	}
898	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container::-moz-placeholder {
899	opacity: 1;
900	color: rgba(30, 30, 30, 0.62);
901	}
902	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container:-ms-input-placeholder {
903	color: rgba(30, 30, 30, 0.62);
904	}
905	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-disabled {
906	background: #ddd;
907	border-color: #ddd;
908	}
909	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container.is-active {
910	border-color: var(--wp-admin-theme-color);
911	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
912	outline: 2px solid transparent;
913	}
914	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
915	display: inline-block;
916	flex: 1;
917	font-size: 16px;
918	width: 100%;
919	max-width: 100%;
920	margin-right: 4px;
921	padding: 0;
922	min-height: 24px;
923	min-width: 50px;
924	background: inherit;
925	border: 0;
926	color: #1e1e1e;
927	box-shadow: none;
928	}
929	@media (min-width: 600px) {
930	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
931	font-size: 13px;
932	}
933	}
934	.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 {
935	outline: none;
936	box-shadow: none;
937	}
938	.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 {
939	width: auto;
940	}
941	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
942	display: inline-block;
943	margin-bottom: 4px;
944	}
945	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__help {
946	font-size: 12px;
947	font-style: normal;
948	color: #757575;
949	}
950	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token {
951	font-size: 13px;
952	display: flex;
953	margin: 2px 0 2px 4px;
954	color: #1e1e1e;
955	max-width: 100%;
956	}
957	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__token-text,
958	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-success .components-form-token-field__remove-token {
959	background: #4ab866;
960	}
961	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__token-text,
962	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-error .components-form-token-field__remove-token {
963	background: #cc1818;
964	}
965	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__token-text,
966	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
967	color: #757575;
968	}
969	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless {
970	position: relative;
971	padding: 0 0 0 16px;
972	}
973	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
974	background: transparent;
975	color: var(--wp-admin-theme-color);
976	}
977	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
978	background: transparent;
979	color: #757575;
980	position: absolute;
981	top: 1px;
982	left: 0;
983	}
984	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
985	color: #4ab866;
986	}
987	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
988	color: #cc1818;
989	border-radius: 0 4px 4px 0;
990	padding: 0 6px 0 4px;
991	}
992	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
993	color: #1e1e1e;
994	}
995	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
996	cursor: default;
997	}
998	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
999	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
1000	display: inline-block;
1001	line-height: 24px;
1002	height: auto;
1003	background: #ddd;
1004	min-width: unset;
1005	transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
1006	}
1007	@media (prefers-reduced-motion: reduce) {
1008	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text,
1009	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
1010	transition-duration: 0s;
1011	transition-delay: 0s;
1012	animation-duration: 1ms;
1013	animation-delay: 0s;
1014	}
1015	}
1016	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
1017	border-radius: 0 2px 2px 0;
1018	padding: 0 8px 0 0;
1019	white-space: nowrap;
1020	overflow: hidden;
1021	text-overflow: ellipsis;
1022	}
1023	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button {
1024	cursor: pointer;
1025	border-radius: 2px 0 0 2px;
1026	padding: 0 2px;
1027	color: #1e1e1e;
1028	line-height: 10px;
1029	overflow: initial;
1030	}
1031	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button:hover {
1032	color: #1e1e1e;
1033	}
1034	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
1035	flex: 1 0 100%;
1036	min-width: 100%;
1037	max-height: 9em;
1038	overflow-y: auto;
1039	transition: all 0.15s ease-in-out;
1040	list-style: none;
1041	border-top: 1px solid #757575;
1042	margin: 4px -4px -4px;
1043	padding: 0;
1044	}
1045	@media (prefers-reduced-motion: reduce) {
1046	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
1047	transition-duration: 0s;
1048	transition-delay: 0s;
1049	}
1050	}
1051	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
1052	color: #757575;
1053	display: block;
1054	font-size: 13px;
1055	padding: 4px 8px;
1056	margin: 0;
1057	cursor: pointer;
1058	}
1059	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
1060	background: var(--wp-admin-theme-color);
1061	color: #fff;
1062	}
1063	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion-match {
1064	text-decoration: underline;
1065	}
1066
1067	.wc-blocks-components-form-token-field-wrapper {
1068	border-color: #949494;
1069	}
1070	.wc-blocks-components-form-token-field-wrapper .components-visually-hidden,
1071	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__label {
1072	border: 0;
1073	clip: rect(1px, 1px, 1px, 1px);
1074	clip-path: inset(50%);
1075	height: 1px;
1076	width: 1px;
1077	margin: -1px;
1078	overflow: hidden;
1079	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
1080	overflow-wrap: normal !important;
1081	word-wrap: normal !important;
1082	padding: 0;
1083	position: absolute !important;
1084	}
1085	.wc-blocks-components-form-token-field-wrapper .components-form-token-field,
1086	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
1087	border-color: inherit;
1088	box-sizing: border-box;
1089	margin-bottom: 0;
1090	}
1091	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
1092	background-color: #fff;
1093	border-radius: 0;
1094	box-shadow: none;
1095	color: #000;
1096	position: relative;
1097	}
1098	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1099	min-height: 30px;
1100	}
1101	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token.components-button,
1102	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__token-text {
1103	background: #e0e0e0;
1104	}
1105	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__remove-token {
1106	border: none;
1107	}
1108	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list {
1109	background-color: #fff;
1110	border: 1px solid #949494;
1111	border-width: 0 1px 1px;
1112	right: -1px;
1113	margin: 1px 0 0;
1114	position: absolute;
1115	left: -1px;
1116	top: 100%;
1117	z-index: 50;
1118	}
1119	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestions-list:empty {
1120	display: none;
1121	}
1122	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion {
1123	padding: 8px;
1124	}
1125	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__suggestion.is-selected {
1126	background: #f0f0f0;
1127	color: #2f2f2f;
1128	}
1129	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token {
1130	margin-left: 0;
1131	position: relative;
1132	width: 100%;
1133	z-index: 1;
1134	}
1135	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__remove-token.components-button,
1136	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
1137	background: transparent;
1138	}
1139	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token-text {
1140	padding-right: 4px;
1141	width: 100%;
1142	}
1143	.wc-blocks-components-form-token-field-wrapper.single-selection .components-form-token-field__token + input[type=text].components-form-token-field__input {
1144	position: absolute;
1145	}
1146	.wc-blocks-components-form-token-field-wrapper.single-selection .is-active .components-form-token-field__token + input[type=text].components-form-token-field__input {
1147	border: 1px solid #949494;
1148	margin: 0 2px 4px;
1149	padding: 0 5px;
1150	position: static;
1151	}
1152