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

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

woocommerce / assets / client / blocks Last commit date

collection-rating-filter-rtl.css

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