gutenberg / build / styles / edit-site / style.css

style.css in Gutenberg 23.2.2, at build/styles/edit-site/style.css

5,499 lines 148.6 KB

Raw Download Zip

1	@charset "UTF-8";
2	/**
3	* Colors
4	*/
5	/**
6	* Typography
7	*/
8	/**
9	* SCSS Variables.
10	*
11	* Please use variables from this sheet to ensure consistency across the UI.
12	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
13	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
14	*/
15	/**
16	* Fonts & basic variables.
17	*/
18	/**
19	* Typography
20	*/
21	/**
22	* Grid System.
23	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
24	*/
25	/**
26	* Radius scale.
27	*/
28	/**
29	* Elevation scale.
30	*/
31	/**
32	* Dimensions.
33	*/
34	/**
35	* Mobile specific styles
36	*/
37	/**
38	* Editor styles.
39	*/
40	/**
41	* Block & Editor UI.
42	*/
43	/**
44	* Block paddings.
45	*/
46	/**
47	* React Native specific.
48	* These variables do not appear to be used anywhere else.
49	*/
50	/**
51	* Breakpoints & Media Queries
52	*/
53	/**
54	* Converts a hex value into the rgb equivalent.
55	*
56	* @param {string} hex - the hexadecimal value to convert
57	* @return {string} comma separated rgb values
58	*/
59	/**
60	* Long content fade mixin
61	*
62	* Creates a fading overlay to signify that the content is longer
63	* than the space allows.
64	*/
65	/**
66	* Breakpoint mixins
67	*/
68	/**
69	* Focus styles.
70	*/
71	/**
72	* Applies editor left position to the selector passed as argument
73	*/
74	/**
75	* Styles that are reused verbatim in a few places
76	*/
77	/**
78	* Allows users to opt-out of animations via OS-level preferences.
79	*/
80	/**
81	* Reset default styles for JavaScript UI based pages.
82	* This is a WP-admin agnostic reset
83	*/
84	/**
85	* Reset the WP Admin page styles for Gutenberg-like pages.
86	*/
87	/**
88	* Creates a checkerboard pattern background to indicate transparency.
89	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
90	*/
91	:root {
92	--wp-block-synced-color: #7a00df;
93	--wp-block-synced-color--rgb: 122, 0, 223;
94	--wp-bound-block-color: var(--wp-block-synced-color);
95	--wp-editor-canvas-background: #ddd;
96	--wp-admin-theme-color: #007cba;
97	--wp-admin-theme-color--rgb: 0, 124, 186;
98	--wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
99	--wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
100	--wp-admin-theme-color-darker-20: #005a87;
101	--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
102	--wp-admin-border-width-focus: 2px;
103	}
104	@media (min-resolution: 192dpi) {
105	:root {
106	--wp-admin-border-width-focus: 1.5px;
107	}
108	}
109
110	/**
111	* Colors
112	*/
113	/**
114	* SCSS Variables.
115	*
116	* Please use variables from this sheet to ensure consistency across the UI.
117	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
118	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
119	*/
120	/**
121	* Fonts & basic variables.
122	*/
123	/**
124	* Typography
125	*/
126	/**
127	* Grid System.
128	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
129	*/
130	/**
131	* Radius scale.
132	*/
133	/**
134	* Elevation scale.
135	*/
136	/**
137	* Dimensions.
138	*/
139	/**
140	* Mobile specific styles
141	*/
142	/**
143	* Editor styles.
144	*/
145	/**
146	* Block & Editor UI.
147	*/
148	/**
149	* Block paddings.
150	*/
151	/**
152	* React Native specific.
153	* These variables do not appear to be used anywhere else.
154	*/
155	/**
156	* Typography
157	*/
158	/**
159	* Breakpoints & Media Queries
160	*/
161	/**
162	* Converts a hex value into the rgb equivalent.
163	*
164	* @param {string} hex - the hexadecimal value to convert
165	* @return {string} comma separated rgb values
166	*/
167	/**
168	* Long content fade mixin
169	*
170	* Creates a fading overlay to signify that the content is longer
171	* than the space allows.
172	*/
173	/**
174	* Breakpoint mixins
175	*/
176	/**
177	* Focus styles.
178	*/
179	/**
180	* Applies editor left position to the selector passed as argument
181	*/
182	/**
183	* Styles that are reused verbatim in a few places
184	*/
185	/**
186	* Allows users to opt-out of animations via OS-level preferences.
187	*/
188	/**
189	* Reset default styles for JavaScript UI based pages.
190	* This is a WP-admin agnostic reset
191	*/
192	/**
193	* Reset the WP Admin page styles for Gutenberg-like pages.
194	*/
195	/**
196	* Creates a checkerboard pattern background to indicate transparency.
197	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
198	*/
199	.dataviews-wrapper,
200	.dataviews-picker-wrapper {
201	height: 100%;
202	box-sizing: border-box;
203	scroll-padding-bottom: 64px;
204	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
205	container: dataviews-wrapper/inline-size;
206	display: flex;
207	flex-direction: column;
208	font-size: 13px;
209	line-height: 1.4;
210	background-color: var(--wp-dataviews-color-background, #fff);
211	}
212
213	.dataviews__view-actions,
214	.dataviews-filters__container {
215	box-sizing: border-box;
216	padding: 16px 24px;
217	flex-shrink: 0;
218	position: sticky;
219	left: 0;
220	background-color: inherit;
221	}
222
223	@media not (prefers-reduced-motion) {
224	.dataviews__view-actions,
225	.dataviews-filters__container {
226	transition: padding ease-out 0.1s;
227	}
228	}
229	.dataviews-no-results,
230	.dataviews-loading {
231	padding: 0 24px;
232	flex-grow: 1;
233	display: flex;
234	align-items: center;
235	justify-content: center;
236	}
237
238	@media not (prefers-reduced-motion) {
239	.dataviews-no-results,
240	.dataviews-loading {
241	transition: padding ease-out 0.1s;
242	}
243	}
244	.dataviews-no-results.is-refreshing {
245	opacity: 0.5;
246	pointer-events: none;
247	}
248
249	@media not (prefers-reduced-motion) {
250	.dataviews-no-results.is-refreshing {
251	opacity: 1;
252	animation: dataviews-pulse 1s ease-in-out infinite;
253	}
254	}
255	@keyframes dataviews-pulse {
256	0%, 100% {
257	opacity: 1;
258	}
259	50% {
260	opacity: 0.5;
261	}
262	}
263	.dataviews-loading-more {
264	text-align: center;
265	}
266
267	@container (max-width: 430px) {
268	.dataviews__view-actions,
269	.dataviews-filters__container {
270	padding: 12px 24px;
271	}
272	}
273	.dataviews-title-field {
274	font-size: 13px;
275	font-weight: 499;
276	color: #2f2f2f;
277	text-overflow: ellipsis;
278	white-space: nowrap;
279	width: 100%;
280	}
281
282	.dataviews-title-field a {
283	text-decoration: none;
284	text-overflow: ellipsis;
285	white-space: nowrap;
286	overflow: hidden;
287	display: block;
288	flex-grow: 0;
289	color: #2f2f2f;
290	}
291
292	.dataviews-title-field a:hover {
293	color: var(--wp-admin-theme-color);
294	}
295
296	.dataviews-title-field a:focus {
297	color: var(--wp-admin-theme-color--rgb);
298	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
299	border-radius: 2px;
300	}
301
302	.dataviews-title-field button.components-button.is-link {
303	text-decoration: none;
304	font-weight: inherit;
305	text-overflow: ellipsis;
306	white-space: nowrap;
307	overflow: hidden;
308	display: block;
309	width: 100%;
310	color: #1e1e1e;
311	}
312
313	.dataviews-title-field button.components-button.is-link:hover {
314	color: var(--wp-admin-theme-color);
315	}
316
317	.dataviews-title-field--clickable {
318	cursor: var(--wpds-cursor-control, pointer);
319	color: #2f2f2f;
320	}
321
322	.dataviews-title-field--clickable:hover {
323	color: var(--wp-admin-theme-color);
324	}
325
326	.dataviews-title-field--clickable:focus {
327	color: var(--wp-admin-theme-color--rgb);
328	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
329	border-radius: 2px;
330	}
331
332	.dataviews__view-actions--infinite-scroll {
333	position: sticky;
334	top: 0;
335	z-index: 2;
336	background-color: #fff;
337	}
338
339	.dataviews-bulk-actions-footer__item-count {
340	color: #1e1e1e;
341	}
342
343	.dataviews-bulk-actions-footer__container {
344	margin-right: auto;
345	min-height: 32px;
346	}
347
348	.dataviews-layout__container {
349	flex: 1;
350	min-height: 0;
351	overflow: auto;
352	display: flex;
353	flex-direction: column;
354	background-color: inherit;
355	}
356
357	.dataviews-filters__button {
358	position: relative;
359	}
360
361	.dataviews-filters__container {
362	padding-top: 0;
363	}
364
365	.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
366	opacity: 0;
367	}
368
369	.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
370	opacity: 1;
371	}
372
373	.dataviews-filters__summary-popover {
374	font-size: 13px;
375	line-height: 1.4;
376	}
377
378	.dataviews-filters__summary-popover .components-popover__content {
379	width: 100%;
380	min-width: 230px;
381	max-width: 250px;
382	border-radius: 4px;
383	}
384
385	.dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
386	padding: 0;
387	}
388
389	.dataviews-filters__summary-operators-container {
390	padding: 8px 16px;
391	}
392
393	.dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
394	border-bottom: 1px solid #e0e0e0;
395	}
396
397	.dataviews-filters__summary-operators-container:empty {
398	display: none;
399	}
400
401	.dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
402	color: #757575;
403	white-space: nowrap;
404	overflow: hidden;
405	text-overflow: ellipsis;
406	flex-shrink: 0; /* Prevents this element from shrinking */
407	max-width: calc(100% - 55px);
408	}
409
410	.dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
411	width: 100%;
412	white-space: nowrap;
413	overflow: hidden;
414	}
415
416	.dataviews-filters__summary-chip-container {
417	position: relative;
418	white-space: pre-wrap;
419	}
420
421	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
422	border-radius: 16px;
423	border: 1px solid transparent;
424	cursor: var(--wpds-cursor-control, pointer);
425	padding: 4px 12px;
426	min-height: 32px;
427	background: #f0f0f0;
428	color: #2f2f2f;
429	position: relative;
430	display: flex;
431	align-items: center;
432	box-sizing: border-box;
433	}
434
435	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
436	cursor: default;
437	}
438
439	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
440	padding-inline-end: 28px;
441	}
442
443	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
444	background: #e0e0e0;
445	color: #1e1e1e;
446	}
447
448	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
449	color: var(--wp-admin-theme-color);
450	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
451	}
452
453	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
454	background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
455	}
456
457	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
458	outline: none;
459	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
460	}
461
462	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
463	font-weight: 499;
464	}
465
466	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
467	width: 24px;
468	height: 24px;
469	border-radius: 50%;
470	border: 0;
471	padding: 0;
472	position: absolute;
473	right: 4px;
474	top: 50%;
475	transform: translateY(-50%);
476	display: flex;
477	align-items: center;
478	justify-content: center;
479	background: transparent;
480	cursor: var(--wpds-cursor-control, pointer);
481	}
482
483	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
484	fill: #757575;
485	}
486
487	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
488	background: #e0e0e0;
489	}
490
491	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
492	fill: #1e1e1e;
493	}
494
495	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
496	fill: var(--wp-admin-theme-color);
497	}
498
499	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
500	background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
501	}
502
503	.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
504	outline: none;
505	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
506	}
507
508	.dataviews-filters__search-widget-filter-combobox-list {
509	max-height: 184px;
510	padding: 4px;
511	overflow: auto;
512	border-top: 1px solid #e0e0e0;
513	}
514
515	.dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
516	font-weight: 600;
517	}
518
519	.dataviews-filters__search-widget-listbox {
520	padding: 4px;
521	overflow: auto;
522	}
523
524	.dataviews-filters__search-widget-listitem {
525	display: flex;
526	align-items: center;
527	gap: 8px;
528	border-radius: 2px;
529	box-sizing: border-box;
530	padding: 4px 12px;
531	cursor: default;
532	min-height: 32px;
533	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
534	font-weight: 400;
535	font-size: 13px;
536	line-height: 20px;
537	}
538
539	.dataviews-filters__search-widget-listitem:last-child {
540	margin-block-end: 0;
541	}
542
543	.dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
544	background-color: var(--wp-admin-theme-color);
545	color: #fff;
546	}
547
548	.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
549	color: #fff;
550	}
551
552	.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
553	border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
554	background: #fff;
555	}
556
557	.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
558	border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
559	background: var(--wp-admin-theme-color-darker-20, #183ad6);
560	}
561
562	.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
563	border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
564	}
565
566	.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
567	border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
568	background: var(--wp-admin-theme-color-darker-20, #183ad6);
569	}
570
571	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
572	overflow: hidden;
573	text-overflow: ellipsis;
574	white-space: nowrap;
575	min-width: 0;
576	}
577
578	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
579	display: block;
580	overflow: hidden;
581	text-overflow: ellipsis;
582	font-size: 12px;
583	line-height: 16px;
584	color: #757575;
585	}
586
587	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
588	border: 1px solid #1e1e1e;
589	margin-right: 12px;
590	transition: none;
591	border-radius: 50%;
592	width: 24px;
593	height: 24px;
594	min-width: 24px;
595	max-width: 24px;
596	position: relative;
597	}
598
599	@media not (prefers-reduced-motion) {
600	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
601	transition: box-shadow 0.1s linear;
602	}
603	}
604	@media (min-width: 600px) {
605	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
606	height: 16px;
607	width: 16px;
608	min-width: 16px;
609	max-width: 16px;
610	}
611	}
612	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
613	box-sizing: inherit;
614	width: 12px;
615	height: 12px;
616	position: absolute;
617	top: 50%;
618	left: 50%;
619	transform: translate(-50%, -50%);
620	margin: 0;
621	background-color: #fff;
622	border: 4px solid #fff;
623	}
624
625	@media (min-width: 600px) {
626	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
627	width: 8px;
628	height: 8px;
629	}
630	}
631	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
632	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
633	outline: 2px solid transparent;
634	}
635
636	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
637	background: var(--wp-admin-theme-color);
638	border: none;
639	}
640
641	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
642	margin: 0;
643	padding: 0;
644	}
645
646	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
647	background: var(--wp-admin-theme-color, #3858e9);
648	border-color: var(--wp-admin-theme-color, #3858e9);
649	}
650
651	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
652	content: "";
653	border-radius: 50%;
654	box-sizing: inherit;
655	width: 12px;
656	height: 12px;
657	position: absolute;
658	top: 50%;
659	left: 50%;
660	transform: translate(-50%, -50%);
661	margin: 0;
662	background-color: #fff;
663	border: 4px solid #fff;
664	}
665
666	@media (min-width: 600px) {
667	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
668	width: 8px;
669	height: 8px;
670	}
671	}
672	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
673	--checkbox-size: 24px;
674	flex-shrink: 0;
675	border: 1px solid #1e1e1e;
676	margin-right: 12px;
677	transition: none;
678	border-radius: 2px;
679	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
680	padding: 6px 8px;
681	/* Fonts smaller than 16px causes mobile safari to zoom. */
682	font-size: 16px;
683	/* Override core line-height. To be reviewed. */
684	line-height: normal;
685	box-shadow: 0 0 0 transparent;
686	border-radius: 2px;
687	border: 1px solid #949494;
688	}
689
690	@media not (prefers-reduced-motion) {
691	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
692	transition: box-shadow 0.1s linear;
693	}
694	}
695	@media (min-width: 600px) {
696	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
697	font-size: 13px;
698	/* Override core line-height. To be reviewed. */
699	line-height: normal;
700	}
701	}
702	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
703	border-color: var(--wp-admin-theme-color);
704	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
705	outline: 2px solid transparent;
706	}
707
708	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
709	color: rgba(30, 30, 30, 0.62);
710	}
711
712	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
713	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
714	outline: 2px solid transparent;
715	}
716
717	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
718	background: var(--wp-admin-theme-color);
719	border-color: var(--wp-admin-theme-color);
720	}
721
722	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
723	margin: -3px -5px;
724	color: #fff;
725	}
726
727	@media (min-width: 782px) {
728	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
729	margin: -4px 0 0 -5px;
730	}
731	}
732	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
733	background: var(--wp-admin-theme-color);
734	border-color: var(--wp-admin-theme-color);
735	}
736
737	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
738	content: "\f460";
739	float: left;
740	display: inline-block;
741	vertical-align: middle;
742	width: 16px;
743	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
744	font: normal 30px/1 dashicons;
745	speak: none;
746	-webkit-font-smoothing: antialiased;
747	-moz-osx-font-smoothing: grayscale;
748	}
749
750	@media (min-width: 782px) {
751	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
752	float: none;
753	font-size: 21px;
754	}
755	}
756	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
757	background: #f0f0f0;
758	border-color: #ddd;
759	cursor: default;
760	opacity: 1;
761	}
762
763	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
764	position: relative;
765	background: #fff;
766	color: #1e1e1e;
767	margin: 0;
768	padding: 0;
769	width: var(--checkbox-size);
770	height: var(--checkbox-size);
771	}
772
773	@media (min-width: 600px) {
774	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
775	--checkbox-size: 16px;
776	}
777	}
778	@media not (prefers-reduced-motion) {
779	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
780	transition: 0.1s border-color ease-in-out;
781	}
782	}
783	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
784	background: var(--wp-admin-theme-color, #3858e9);
785	border-color: var(--wp-admin-theme-color, #3858e9);
786	}
787
788	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
789	--checkmark-size: var(--checkbox-size);
790	fill: #fff;
791	position: absolute;
792	left: 50%;
793	top: 50%;
794	transform: translate(-50%, -50%);
795	width: var(--checkmark-size);
796	height: var(--checkmark-size);
797	}
798
799	@media (min-width: 600px) {
800	.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
801	--checkmark-size: calc(var(--checkbox-size) + 4px);
802	}
803	}
804	.dataviews-filters__search-widget-filter-combobox__wrapper {
805	position: relative;
806	padding: 8px;
807	}
808
809	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
810	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
811	padding: 6px 8px;
812	/* Fonts smaller than 16px causes mobile safari to zoom. */
813	font-size: 16px;
814	/* Override core line-height. To be reviewed. */
815	line-height: normal;
816	box-shadow: 0 0 0 transparent;
817	border-radius: 2px;
818	border: 1px solid #949494;
819	}
820
821	@media not (prefers-reduced-motion) {
822	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
823	transition: box-shadow 0.1s linear;
824	}
825	}
826	@media (min-width: 600px) {
827	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
828	font-size: 13px;
829	/* Override core line-height. To be reviewed. */
830	line-height: normal;
831	}
832	}
833	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
834	border-color: var(--wp-admin-theme-color);
835	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
836	outline: 2px solid transparent;
837	}
838
839	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
840	color: rgba(30, 30, 30, 0.62);
841	}
842
843	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
844	display: block;
845	padding: 0 8px 0 32px;
846	width: 100%;
847	height: 32px;
848	margin-left: 0;
849	margin-right: 0;
850	/* Fonts smaller than 16px causes mobile safari to zoom. */
851	font-size: 16px;
852	}
853
854	@media (min-width: 600px) {
855	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
856	font-size: 13px;
857	}
858	}
859	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
860	background: #fff;
861	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
862	}
863
864	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
865	color: #757575;
866	}
867
868	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
869	-webkit-appearance: none;
870	}
871
872	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
873	position: absolute;
874	inset-inline-start: 12px;
875	top: 0;
876	bottom: 0;
877	display: flex;
878	align-items: center;
879	justify-content: center;
880	width: 24px;
881	}
882
883	.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
884	transform: scaleX(-1);
885	}
886
887	.dataviews-filters__container-visibility-toggle {
888	position: relative;
889	flex-shrink: 0;
890	}
891
892	.dataviews-filters-toggle__count {
893	position: absolute;
894	top: 0;
895	right: 0;
896	transform: translate(50%, -50%);
897	background: var(--wp-admin-theme-color, #3858e9);
898	height: 16px;
899	min-width: 16px;
900	line-height: 16px;
901	padding: 0 4px;
902	text-align: center;
903	border-radius: 8px;
904	font-size: 11px;
905	outline: var(--wp-admin-border-width-focus) solid #fff;
906	color: #fff;
907	box-sizing: border-box;
908	}
909
910	.dataviews-search {
911	width: fit-content;
912	}
913
914	.dataviews-filters__user-input-widget {
915	padding: 16px;
916	}
917
918	.dataviews-filters__user-input-widget .components-input-control__prefix {
919	padding-left: 8px;
920	}
921
922	.dataviews-filters__search-widget-no-elements {
923	display: flex;
924	align-items: center;
925	justify-content: center;
926	padding: 16px;
927	}
928
929	.dataviews-footer {
930	position: sticky;
931	bottom: 0;
932	left: 0;
933	background-color: inherit;
934	padding: 12px 24px;
935	border-top: 1px solid #f0f0f0;
936	flex-shrink: 0;
937	}
938
939	@media not (prefers-reduced-motion) {
940	.dataviews-footer {
941	transition: padding ease-out 0.1s;
942	}
943	}
944	.dataviews-footer {
945	z-index: 2;
946	}
947
948	.dataviews-footer .is-refreshing {
949	opacity: 0.5;
950	pointer-events: none;
951	}
952
953	@media not (prefers-reduced-motion) {
954	.dataviews-footer .is-refreshing {
955	opacity: 1;
956	animation: dataviews-pulse 1s ease-in-out infinite;
957	}
958	}
959	@container (max-width: 560px) {
960	.dataviews-footer__content {
961	flex-direction: column !important;
962	}
963	.dataviews-footer__content .dataviews-bulk-actions-footer__container {
964	width: 100%;
965	}
966	.dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
967	flex-grow: 1;
968	}
969	.dataviews-footer__content .dataviews-pagination {
970	width: 100%;
971	justify-content: space-between;
972	}
973	}
974	.dataviews-pagination__page-select {
975	font-size: 11px;
976	font-weight: 499;
977	text-transform: uppercase;
978	}
979
980	@media (min-width: 600px) {
981	.dataviews-pagination__page-select .components-select-control__input {
982	font-size: 11px !important;
983	font-weight: 499;
984	}
985	}
986	.dataviews-action-modal {
987	z-index: 1000001;
988	}
989
990	.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
991	padding: 0 4px;
992	}
993
994	.dataviews-selection-checkbox {
995	--checkbox-input-size: 24px;
996	}
997
998	@media (min-width: 600px) {
999	.dataviews-selection-checkbox {
1000	--checkbox-input-size: 16px;
1001	}
1002	}
1003	.dataviews-selection-checkbox {
1004	line-height: 0;
1005	flex-shrink: 0;
1006	}
1007
1008	.dataviews-selection-checkbox .components-checkbox-control__input-container {
1009	margin: 0;
1010	}
1011
1012	.dataviews-view-config {
1013	width: 320px;
1014	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1015	container-type: inline-size;
1016	font-size: 13px;
1017	line-height: 1.4;
1018	}
1019
1020	.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
1021	overflow-y: scroll;
1022	height: 100%;
1023	}
1024
1025	.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
1026	width: auto;
1027	}
1028
1029	.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
1030	text-transform: uppercase;
1031	}
1032
1033	.dataviews-settings-section__title.dataviews-settings-section__title {
1034	line-height: 24px;
1035	font-size: 15px;
1036	}
1037
1038	.dataviews-settings-section__sidebar {
1039	grid-column: span 4;
1040	}
1041
1042	.dataviews-settings-section__content,
1043	.dataviews-settings-section__content > * {
1044	grid-column: span 8;
1045	}
1046
1047	.dataviews-settings-section__content .is-divided-in-two {
1048	display: contents;
1049	}
1050
1051	.dataviews-settings-section__content .is-divided-in-two > * {
1052	grid-column: span 4;
1053	}
1054
1055	.dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
1056	display: none;
1057	}
1058
1059	@container (max-width: 500px) {
1060	.dataviews-settings-section.dataviews-settings-section {
1061	grid-template-columns: repeat(2, 1fr);
1062	}
1063	.dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
1064	grid-column: span 2;
1065	}
1066	.dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
1067	grid-column: span 2;
1068	}
1069	}
1070	.dataviews-view-config__sort-controls > * {
1071	flex: 1;
1072	}
1073
1074	.dataviews-view-config__label {
1075	text-wrap: nowrap;
1076	}
1077
1078	.dataviews-view-config__toggle-wrapper {
1079	position: relative;
1080	display: inline-flex;
1081	}
1082
1083	.dataviews-view-config__modified-indicator {
1084	position: absolute;
1085	top: 4px;
1086	right: 4px;
1087	width: 4px;
1088	height: 4px;
1089	background: var(--wp-admin-theme-color, #3858e9);
1090	border-radius: 50%;
1091	pointer-events: none;
1092	}
1093
1094	.dataviews-view-grid-items {
1095	margin-bottom: auto;
1096	display: grid;
1097	gap: 24px;
1098	grid-template-rows: max-content;
1099	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1100	padding: 0 24px 24px;
1101	container-type: inline-size;
1102	}
1103
1104	@media not (prefers-reduced-motion) {
1105	.dataviews-view-grid-items {
1106	transition: padding ease-out 0.1s;
1107	}
1108	}
1109	.dataviews-view-grid-items.has-compact-density {
1110	gap: 16px;
1111	}
1112
1113	.dataviews-view-grid-items.has-comfortable-density {
1114	gap: 32px;
1115	}
1116
1117	.dataviews-view-grid {
1118	padding: 0 24px 24px;
1119	display: flex;
1120	flex-direction: column;
1121	gap: 24px;
1122	container-type: inline-size;
1123	margin-bottom: auto;
1124	}
1125
1126	@media not (prefers-reduced-motion) {
1127	.dataviews-view-grid {
1128	transition: padding ease-out 0.1s;
1129	}
1130	}
1131	.dataviews-view-grid.has-compact-density {
1132	gap: 16px;
1133	}
1134
1135	.dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
1136	gap: 16px;
1137	}
1138
1139	.dataviews-view-grid.has-comfortable-density {
1140	gap: 32px;
1141	}
1142
1143	.dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
1144	gap: 32px;
1145	}
1146
1147	.dataviews-view-grid .dataviews-view-grid__row {
1148	display: grid;
1149	gap: 24px;
1150	}
1151
1152	.dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
1153	border-radius: 4px;
1154	position: relative;
1155	}
1156
1157	.dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
1158	content: "";
1159	position: absolute;
1160	top: 0;
1161	left: 0;
1162	width: 100%;
1163	height: 100%;
1164	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1165	border-radius: 4px;
1166	pointer-events: none;
1167	outline: 2px solid transparent;
1168	}
1169
1170	.dataviews-view-grid .dataviews-view-grid__card,
1171	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
1172	height: 100%;
1173	justify-content: flex-start;
1174	position: relative;
1175	}
1176
1177	.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title,
1178	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title {
1179	padding: 8px 0 4px;
1180	}
1181
1182	.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1183	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1184	min-height: 24px;
1185	overflow: hidden;
1186	align-content: center;
1187	text-align: start;
1188	}
1189
1190	.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1191	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1192	width: fit-content;
1193	}
1194
1195	.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1196	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1197	color: #1e1e1e;
1198	}
1199
1200	.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1201	.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1202	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1203	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1204	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1205	}
1206
1207	.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1208	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1209	box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1210	}
1211
1212	.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1213	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1214	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1215	}
1216
1217	.dataviews-view-grid .dataviews-view-grid__media,
1218	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1219	width: 100%;
1220	aspect-ratio: 1/1;
1221	background-color: #fff;
1222	border-radius: 4px;
1223	overflow: hidden;
1224	position: relative;
1225	}
1226
1227	.dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
1228	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
1229	aspect-ratio: 3/1;
1230	}
1231
1232	.dataviews-view-grid .dataviews-view-grid__media img,
1233	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1234	object-fit: cover;
1235	width: 100%;
1236	height: 100%;
1237	}
1238
1239	.dataviews-view-grid .dataviews-view-grid__media::after,
1240	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
1241	content: "";
1242	position: absolute;
1243	top: 0;
1244	left: 0;
1245	width: 100%;
1246	height: 100%;
1247	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1248	border-radius: 4px;
1249	pointer-events: none;
1250	}
1251
1252	.dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
1253	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
1254	width: 100%;
1255	height: 100%;
1256	display: block;
1257	border-radius: 4px;
1258	box-shadow: none;
1259	background: #f0f0f0;
1260	}
1261
1262	.dataviews-view-grid .dataviews-view-grid__fields,
1263	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1264	position: relative;
1265	font-size: 12px;
1266	line-height: 16px;
1267	}
1268
1269	.dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
1270	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
1271	padding: 0 0 12px;
1272	}
1273
1274	.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1275	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1276	min-height: 24px;
1277	line-height: 20px;
1278	padding-top: 2px;
1279	}
1280
1281	.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1282	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1283	min-height: 24px;
1284	align-items: center;
1285	}
1286
1287	.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1288	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1289	width: 35%;
1290	color: #757575;
1291	overflow: hidden;
1292	text-overflow: ellipsis;
1293	white-space: nowrap;
1294	}
1295
1296	.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1297	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1298	width: 65%;
1299	overflow: hidden;
1300	text-overflow: ellipsis;
1301	white-space: nowrap;
1302	}
1303
1304	.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
1305	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
1306	display: none;
1307	}
1308
1309	.dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
1310	.dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
1311	padding-bottom: 12px;
1312	}
1313
1314	.dataviews-view-grid.is-refreshing,
1315	.dataviews-view-grid-infinite-scroll.is-refreshing {
1316	opacity: 0.5;
1317	pointer-events: none;
1318	}
1319
1320	@media not (prefers-reduced-motion) {
1321	.dataviews-view-grid.is-refreshing,
1322	.dataviews-view-grid-infinite-scroll.is-refreshing {
1323	opacity: 1;
1324	animation: dataviews-pulse 1s ease-in-out infinite;
1325	}
1326	}
1327	.dataviews-view-grid__field-value:empty,
1328	.dataviews-view-grid__field:empty {
1329	display: none;
1330	}
1331
1332	.dataviews-view-grid__card .dataviews-selection-checkbox {
1333	position: absolute;
1334	top: -9999em;
1335	left: 8px;
1336	z-index: 1;
1337	opacity: 0;
1338	}
1339
1340	@media not (prefers-reduced-motion) {
1341	.dataviews-view-grid__card .dataviews-selection-checkbox {
1342	transition: opacity 0.1s linear;
1343	}
1344	}
1345	@media (hover: none) {
1346	.dataviews-view-grid__card .dataviews-selection-checkbox {
1347	opacity: 1;
1348	top: 8px;
1349	}
1350	}
1351	.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
1352	.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
1353	.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
1354	opacity: 1;
1355	top: 8px;
1356	}
1357
1358	.dataviews-view-grid__card .dataviews-view-grid__media-actions {
1359	position: absolute;
1360	z-index: 1;
1361	top: 4px;
1362	opacity: 0;
1363	right: 4px;
1364	}
1365
1366	.dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1367	background-color: #fff;
1368	}
1369
1370	@media not (prefers-reduced-motion) {
1371	.dataviews-view-grid__card .dataviews-view-grid__media-actions {
1372	transition: opacity 0.1s linear;
1373	}
1374	}
1375	@media (hover: none) {
1376	.dataviews-view-grid__card .dataviews-view-grid__media-actions {
1377	opacity: 1;
1378	top: 4px;
1379	}
1380	}
1381	.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
1382	.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
1383	.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
1384	opacity: 1;
1385	}
1386
1387	.dataviews-view-grid__media--clickable {
1388	cursor: var(--wpds-cursor-control, pointer);
1389	}
1390
1391	.dataviews-view-grid__group-header {
1392	font-size: 15px;
1393	font-weight: 499;
1394	color: #1e1e1e;
1395	margin: 0 0 8px 0;
1396	padding: 0 24px;
1397	container-type: inline-size;
1398	}
1399
1400	div.dataviews-view-list {
1401	list-style-type: none;
1402	}
1403
1404	.dataviews-view-list {
1405	margin: 0 0 auto;
1406	}
1407
1408	.dataviews-view-list div[role=row],
1409	.dataviews-view-list div[role=article] {
1410	margin: 0;
1411	border-top: 1px solid #f0f0f0;
1412	}
1413
1414	.dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
1415	.dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
1416	position: relative;
1417	padding: 16px 24px;
1418	box-sizing: border-box;
1419	}
1420
1421	.dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1422	.dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1423	display: flex;
1424	width: max-content;
1425	flex: 0 0 auto;
1426	gap: 4px;
1427	white-space: nowrap;
1428	}
1429
1430	.dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
1431	.dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
1432	position: relative;
1433	z-index: 1;
1434	}
1435
1436	.dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1437	.dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1438	height: 24px;
1439	}
1440
1441	.dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1442	.dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1443	flex: 0;
1444	overflow: hidden;
1445	width: 0;
1446	}
1447
1448	.dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
1449	.dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
1450	flex-basis: min-content;
1451	width: auto;
1452	overflow: unset;
1453	}
1454
1455	@media (hover: none) {
1456	.dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1457	.dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1458	flex-basis: min-content;
1459	width: auto;
1460	overflow: unset;
1461	}
1462	}
1463	.dataviews-view-list div[role=row].is-selected.is-selected,
1464	.dataviews-view-list div[role=article].is-selected.is-selected {
1465	border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1466	}
1467
1468	.dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
1469	.dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1470	.dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
1471	border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1472	}
1473
1474	.dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
1475	.dataviews-view-list div[role=article]:not(.is-selected):hover,
1476	.dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1477	.dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1478	color: var(--wp-admin-theme-color);
1479	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1480	border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1481	}
1482
1483	.dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=article],
1484	.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=row],
1485	.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=article],
1486	.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=row],
1487	.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=article],
1488	.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=row],
1489	.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=article] {
1490	border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1491	}
1492
1493	.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1494	.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
1495	.dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field,
1496	.dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
1497	.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
1498	.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
1499	.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1500	.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1501	.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1502	.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1503	color: var(--wp-admin-theme-color);
1504	}
1505
1506	.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1507	.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1508	.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1509	.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1510	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1511	color: #1e1e1e;
1512	}
1513
1514	.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1515	.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1516	.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1517	.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1518	.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1519	.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1520	.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1521	.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1522	color: #1e1e1e;
1523	}
1524
1525	.dataviews-view-list .dataviews-view-list__item {
1526	position: absolute;
1527	z-index: 1;
1528	inset: 0;
1529	scroll-margin: 8px 0;
1530	appearance: none;
1531	border: none;
1532	background: none;
1533	padding: 0;
1534	cursor: var(--wpds-cursor-control, pointer);
1535	}
1536
1537	.dataviews-view-list .dataviews-view-list__item:focus-visible {
1538	outline: none;
1539	}
1540
1541	.dataviews-view-list .dataviews-view-list__item:focus-visible::before {
1542	position: absolute;
1543	content: "";
1544	inset: var(--wp-admin-border-width-focus);
1545	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1546	border-radius: 2px;
1547	outline: 2px solid transparent;
1548	}
1549
1550	.dataviews-view-list .dataviews-view-list__title-field {
1551	flex: 1;
1552	min-height: 24px;
1553	line-height: 24px;
1554	overflow: hidden;
1555	}
1556
1557	.dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
1558	z-index: 1;
1559	}
1560
1561	.dataviews-view-list .dataviews-view-list__media-wrapper {
1562	width: 52px;
1563	height: 52px;
1564	overflow: hidden;
1565	position: relative;
1566	flex-shrink: 0;
1567	background-color: #fff;
1568	border-radius: 4px;
1569	}
1570
1571	.dataviews-view-list .dataviews-view-list__media-wrapper img {
1572	width: 100%;
1573	height: 100%;
1574	object-fit: cover;
1575	}
1576
1577	.dataviews-view-list .dataviews-view-list__media-wrapper::after {
1578	content: "";
1579	position: absolute;
1580	top: 0;
1581	left: 0;
1582	width: 100%;
1583	height: 100%;
1584	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1585	border-radius: 4px;
1586	}
1587
1588	.dataviews-view-list .dataviews-view-list__field-wrapper {
1589	flex-grow: 1;
1590	min-width: 0;
1591	}
1592
1593	.dataviews-view-list .dataviews-view-list__field {
1594	color: #757575;
1595	}
1596
1597	.dataviews-view-list .dataviews-view-list__fields {
1598	display: flex;
1599	gap: 12px;
1600	row-gap: 4px;
1601	flex-wrap: wrap;
1602	font-size: 12px;
1603	}
1604
1605	.dataviews-view-list .dataviews-view-list__fields:empty {
1606	display: none;
1607	}
1608
1609	.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
1610	display: none;
1611	}
1612
1613	.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1614	min-height: 24px;
1615	line-height: 20px;
1616	display: flex;
1617	align-items: center;
1618	}
1619
1620	.dataviews-view-list + .dataviews-pagination {
1621	justify-content: space-between;
1622	}
1623
1624	.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
1625	padding: 8px 24px;
1626	}
1627
1628	.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1629	min-height: 16px;
1630	line-height: 16px;
1631	}
1632
1633	.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1634	width: 32px;
1635	height: 32px;
1636	}
1637
1638	.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1639	gap: 8px;
1640	row-gap: 4px;
1641	}
1642
1643	.dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1644	min-height: 16px;
1645	line-height: 16px;
1646	}
1647
1648	.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
1649	padding: 24px 24px;
1650	}
1651
1652	.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1653	min-height: 32px;
1654	line-height: 32px;
1655	}
1656
1657	.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
1658	width: 64px;
1659	height: 64px;
1660	}
1661
1662	.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
1663	gap: 16px;
1664	row-gap: 8px;
1665	}
1666
1667	.dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1668	min-height: 32px;
1669	line-height: 24px;
1670	}
1671
1672	.dataviews-view-list.is-refreshing {
1673	opacity: 0.5;
1674	pointer-events: none;
1675	}
1676
1677	@media not (prefers-reduced-motion) {
1678	.dataviews-view-list.is-refreshing {
1679	opacity: 1;
1680	animation: dataviews-pulse 1s ease-in-out infinite;
1681	}
1682	}
1683	.dataviews-view-list__group-header {
1684	font-size: 15px;
1685	font-weight: 499;
1686	color: #1e1e1e;
1687	margin: 0 0 8px 0;
1688	padding: 0 24px;
1689	}
1690
1691	.dataviews-view-table {
1692	width: 100%;
1693	text-indent: 0;
1694	border-color: inherit;
1695	border-collapse: collapse;
1696	position: relative;
1697	color: #757575;
1698	margin-bottom: auto;
1699	background-color: inherit;
1700	}
1701
1702	.dataviews-view-table th {
1703	text-align: left;
1704	color: #1e1e1e;
1705	font-weight: normal;
1706	font-size: 13px;
1707	}
1708
1709	.dataviews-view-table td,
1710	.dataviews-view-table th {
1711	padding: 12px;
1712	}
1713
1714	.dataviews-view-table td.dataviews-view-table__actions-column,
1715	.dataviews-view-table th.dataviews-view-table__actions-column {
1716	text-align: right;
1717	}
1718
1719	.dataviews-view-table td.dataviews-view-table__actions-column--sticky,
1720	.dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1721	position: sticky;
1722	right: 0;
1723	background-color: var(--wp-dataviews-color-background, #fff);
1724	}
1725
1726	.dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
1727	.dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
1728	display: block;
1729	content: "";
1730	position: absolute;
1731	top: 0;
1732	bottom: 0;
1733	left: 0;
1734	width: 1px;
1735	background-color: #f0f0f0;
1736	}
1737
1738	.dataviews-view-table td.dataviews-view-table__checkbox-column,
1739	.dataviews-view-table th.dataviews-view-table__checkbox-column {
1740	padding-right: 0;
1741	}
1742
1743	.dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
1744	.dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
1745	max-width: auto;
1746	min-width: auto;
1747	}
1748
1749	.dataviews-view-table tr {
1750	border-top: 1px solid #f0f0f0;
1751	background-color: inherit;
1752	}
1753
1754	.dataviews-view-table tr td:first-child,
1755	.dataviews-view-table tr th:first-child {
1756	padding-left: 24px;
1757	}
1758
1759	.dataviews-view-table tr td:last-child,
1760	.dataviews-view-table tr th:last-child {
1761	padding-right: 24px;
1762	}
1763
1764	.dataviews-view-table tr:last-child {
1765	border-bottom: 0;
1766	}
1767
1768	.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1769	opacity: 0;
1770	}
1771
1772	@media (hover: none) {
1773	.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1774	opacity: 1;
1775	}
1776	}
1777	.dataviews-view-table tr.is-selected {
1778	background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1779	color: #757575;
1780	}
1781
1782	.dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1783	border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1784	}
1785
1786	.dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1787	background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1788	}
1789
1790	.dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1791	opacity: 1;
1792	}
1793
1794	.dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
1795	background-color: var(--wp-dataviews-color-background, #fff);
1796	}
1797
1798	.dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
1799	background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1800	}
1801
1802	.dataviews-view-table thead {
1803	position: sticky;
1804	inset-block-start: 0;
1805	z-index: 1;
1806	background-color: inherit;
1807	}
1808
1809	.dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
1810	display: block;
1811	content: "";
1812	position: absolute;
1813	bottom: 0;
1814	left: 0;
1815	right: 0;
1816	height: 1px;
1817	background-color: #f0f0f0;
1818	}
1819
1820	.dataviews-view-table thead tr {
1821	border: 0;
1822	}
1823
1824	.dataviews-view-table thead th {
1825	background-color: inherit;
1826	padding-top: 8px;
1827	padding-bottom: 8px;
1828	font-size: 11px;
1829	text-transform: uppercase;
1830	font-weight: 499;
1831	}
1832
1833	.dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1834	padding-left: 4px;
1835	padding-right: 4px;
1836	}
1837
1838	.dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
1839	gap: 4px;
1840	}
1841
1842	.dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
1843	padding-left: 16px;
1844	}
1845
1846	.dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1847	padding-right: 16px;
1848	}
1849
1850	.dataviews-view-table tbody td {
1851	vertical-align: top;
1852	}
1853
1854	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1855	min-height: 32px;
1856	display: flex;
1857	align-items: center;
1858	white-space: nowrap;
1859	}
1860
1861	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
1862	justify-content: flex-end;
1863	font-variant-numeric: tabular-nums;
1864	}
1865
1866	.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
1867	justify-content: center;
1868	}
1869
1870	.dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
1871	min-height: 0;
1872	}
1873
1874	.dataviews-view-table .dataviews-view-table-header-button {
1875	padding: 4px 8px;
1876	font-size: 11px;
1877	text-transform: uppercase;
1878	font-weight: 499;
1879	}
1880
1881	.dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1882	color: #1e1e1e;
1883	}
1884
1885	.dataviews-view-table .dataviews-view-table-header-button span {
1886	speak: none;
1887	}
1888
1889	.dataviews-view-table .dataviews-view-table-header-button span:empty {
1890	display: none;
1891	}
1892
1893	.dataviews-view-table .dataviews-view-table-header {
1894	padding-left: 4px;
1895	}
1896
1897	.dataviews-view-table .dataviews-view-table__actions-column {
1898	width: auto;
1899	white-space: nowrap;
1900	}
1901
1902	.dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
1903	padding-left: 0;
1904	}
1905
1906	.dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
1907	padding-right: 0;
1908	}
1909
1910	.dataviews-view-table.has-compact-density td,
1911	.dataviews-view-table.has-compact-density th {
1912	padding: 4px 8px;
1913	}
1914
1915	.dataviews-view-table.has-comfortable-density td,
1916	.dataviews-view-table.has-comfortable-density th {
1917	padding: 16px 12px;
1918	}
1919
1920	.dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
1921	.dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
1922	.dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
1923	padding-right: 0;
1924	}
1925
1926	.dataviews-view-table-selection-checkbox {
1927	--checkbox-input-size: 24px;
1928	}
1929
1930	@media (min-width: 600px) {
1931	.dataviews-view-table-selection-checkbox {
1932	--checkbox-input-size: 16px;
1933	}
1934	}
1935	.dataviews-column-primary__media {
1936	max-width: 60px;
1937	min-width: 32px;
1938	min-height: 32px;
1939	overflow: hidden;
1940	position: relative;
1941	flex-shrink: 0;
1942	background-color: #fff;
1943	border-radius: 4px;
1944	}
1945
1946	.dataviews-column-primary__media img {
1947	width: 32px;
1948	height: 32px;
1949	object-fit: cover;
1950	}
1951
1952	.dataviews-column-primary__media::after {
1953	content: "";
1954	position: absolute;
1955	top: 0;
1956	left: 0;
1957	width: 100%;
1958	height: 100%;
1959	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1960	border-radius: 4px;
1961	}
1962
1963	.dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
1964	.dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
1965	min-width: 15ch;
1966	max-width: 80ch;
1967	}
1968
1969	.dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1970	font-weight: 499;
1971	padding: 12px 24px;
1972	color: #1e1e1e;
1973	}
1974
1975	/* Column width intents via colgroup: make non-primary columns shrink-to-fit */
1976	.dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
1977	width: 1%;
1978	}
1979
1980	.dataviews-view-table.is-refreshing {
1981	opacity: 0.5;
1982	pointer-events: none;
1983	}
1984
1985	@media not (prefers-reduced-motion) {
1986	.dataviews-view-table.is-refreshing {
1987	opacity: 1;
1988	animation: dataviews-pulse 1s ease-in-out infinite;
1989	}
1990	}
1991	.dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
1992	gap: 16px;
1993	}
1994
1995	.dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
1996	gap: 32px;
1997	}
1998
1999	.dataviews-view-picker-grid .dataviews-view-picker-grid__card {
2000	height: 100%;
2001	justify-content: flex-start;
2002	position: relative;
2003	}
2004
2005	.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
2006	padding: 8px 0 4px;
2007	}
2008
2009	.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2010	min-height: 24px;
2011	overflow: hidden;
2012	align-content: center;
2013	text-align: start;
2014	}
2015
2016	.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2017	width: fit-content;
2018	}
2019
2020	.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
2021	color: #1e1e1e;
2022	}
2023
2024	.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
2025	.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2026	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2027	}
2028
2029	.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2030	box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2031	}
2032
2033	.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2034	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2035	}
2036
2037	.dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
2038	outline: none;
2039	}
2040
2041	.dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2042	outline: 2px solid var(--wp-admin-theme-color);
2043	}
2044
2045	.dataviews-view-picker-grid .dataviews-selection-checkbox {
2046	top: 8px !important;
2047	}
2048
2049	.dataviews-view-picker-grid .dataviews-selection-checkbox input {
2050	pointer-events: none;
2051	}
2052
2053	.dataviews-view-picker-grid .dataviews-view-picker-grid__media {
2054	width: 100%;
2055	aspect-ratio: 1/1;
2056	min-height: 0;
2057	background-color: #fff;
2058	border-radius: 4px;
2059	position: relative;
2060	}
2061
2062	.dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2063	object-fit: cover;
2064	width: 100%;
2065	height: 100%;
2066	}
2067
2068	.dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
2069	content: "";
2070	position: absolute;
2071	top: 0;
2072	left: 0;
2073	width: 100%;
2074	height: 100%;
2075	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2076	border-radius: 4px;
2077	pointer-events: none;
2078	}
2079
2080	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2081	position: relative;
2082	font-size: 12px;
2083	line-height: 16px;
2084	}
2085
2086	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
2087	padding: 0 0 12px;
2088	}
2089
2090	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2091	min-height: 24px;
2092	line-height: 20px;
2093	padding-top: 2px;
2094	}
2095
2096	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2097	min-height: 24px;
2098	align-items: center;
2099	}
2100
2101	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2102	width: 35%;
2103	color: #757575;
2104	overflow: hidden;
2105	text-overflow: ellipsis;
2106	white-space: nowrap;
2107	}
2108
2109	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
2110	width: 65%;
2111	overflow: hidden;
2112	text-overflow: ellipsis;
2113	white-space: nowrap;
2114	}
2115
2116	.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
2117	display: none;
2118	}
2119
2120	.dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
2121	padding-bottom: 12px;
2122	}
2123
2124	.dataviews-view-picker-grid__field-value:empty,
2125	.dataviews-view-picker-grid__field:empty {
2126	display: none;
2127	}
2128
2129	.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2130	position: absolute;
2131	top: -9999em;
2132	left: 8px;
2133	z-index: 1;
2134	}
2135
2136	@media (hover: none) {
2137	.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2138	top: 8px;
2139	}
2140	}
2141	.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
2142	.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
2143	.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
2144	top: 8px;
2145	}
2146
2147	.dataviews-view-picker-grid__media--clickable {
2148	cursor: var(--wpds-cursor-control, pointer);
2149	}
2150
2151	.dataviews-view-picker-grid-group__header {
2152	font-size: 15px;
2153	font-weight: 499;
2154	color: #1e1e1e;
2155	margin: 0 0 8px 0;
2156	padding: 0 48px;
2157	}
2158
2159	.dataviews-view-picker-table {
2160	background-color: inherit;
2161	}
2162
2163	.dataviews-view-picker-table .dataviews-view-table__checkbox-column {
2164	width: 48px;
2165	}
2166
2167	.dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
2168	outline: none;
2169	}
2170
2171	.dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2172	outline: 2px solid var(--wp-admin-theme-color);
2173	}
2174
2175	.dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
2176	pointer-events: none;
2177	opacity: 1;
2178	}
2179
2180	.dataviews-view-picker-table .dataviews-view-table__row {
2181	cursor: var(--wpds-cursor-control, pointer);
2182	}
2183
2184	.dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2185	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2186	}
2187
2188	.dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2189	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2190	}
2191
2192	.dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2193	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
2194	}
2195
2196	.dataviews-view-activity {
2197	margin: 0 0 auto;
2198	padding: 0 24px;
2199	}
2200
2201	.dataviews-view-activity .dataviews-view-activity__group-header {
2202	font-size: 15px;
2203	font-weight: 499;
2204	color: #949494;
2205	margin: 0 0 8px 0;
2206	padding: 0;
2207	}
2208
2209	.dataviews-view-activity .dataviews-view-activity__item-actions {
2210	min-width: 24px;
2211	}
2212
2213	.dataviews-view-activity .dataviews-view-activity__item-content {
2214	flex-grow: 1;
2215	}
2216
2217	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2218	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2219	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2220	min-height: 16px;
2221	}
2222
2223	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
2224	position: relative;
2225	display: flex;
2226	align-items: center;
2227	flex: 1;
2228	overflow: hidden;
2229	}
2230
2231	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
2232	cursor: var(--wpds-cursor-control, pointer);
2233	}
2234
2235	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2236	outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
2237	outline-offset: var(--wp-admin-border-width-focus);
2238	border-radius: 2px;
2239	}
2240
2241	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2242	display: flex;
2243	width: max-content;
2244	flex: 0 0 auto;
2245	}
2246
2247	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
2248	position: relative;
2249	z-index: 1;
2250	}
2251
2252	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2253	color: #757575;
2254	display: flex;
2255	gap: 12px;
2256	row-gap: 4px;
2257	flex-wrap: wrap;
2258	}
2259
2260	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
2261	display: none;
2262	}
2263
2264	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field:has(.dataviews-view-activity__item-field-value:empty) {
2265	display: none;
2266	}
2267
2268	.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
2269	display: flex;
2270	align-items: center;
2271	}
2272
2273	.dataviews-view-activity .dataviews-view-activity__item-type {
2274	align-self: stretch;
2275	flex-shrink: 0;
2276	}
2277
2278	.dataviews-view-activity .dataviews-view-activity__item-type::after {
2279	content: "";
2280	flex: 1 1 auto;
2281	width: 1px;
2282	margin: 0 auto;
2283	background-color: #ddd;
2284	}
2285
2286	.dataviews-view-activity .dataviews-view-activity__item-type::before {
2287	content: "";
2288	flex: 0 0 auto;
2289	width: 1px;
2290	margin: 0 auto;
2291	background-color: #ddd;
2292	}
2293
2294	.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
2295	width: 12px;
2296	}
2297
2298	.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2299	height: 12px;
2300	}
2301
2302	.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2303	width: 11px;
2304	height: 11px;
2305	}
2306
2307	.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
2308	margin: 12px 0;
2309	}
2310
2311	.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2312	width: 24px;
2313	}
2314
2315	.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2316	height: 12px;
2317	}
2318
2319	.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2320	width: 25px;
2321	height: 25px;
2322	}
2323
2324	.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
2325	margin: 12px 0;
2326	padding-top: 8px;
2327	}
2328
2329	.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2330	width: 32px;
2331	}
2332
2333	.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2334	height: 8px;
2335	}
2336
2337	.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2338	width: 33px;
2339	height: 33px;
2340	}
2341
2342	.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
2343	margin: 8px 0 16px;
2344	padding-top: 12px;
2345	}
2346
2347	.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
2348	width: 9px;
2349	height: 9px;
2350	position: relative;
2351	top: 50%;
2352	transform: translateY(-50%);
2353	}
2354
2355	.dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
2356	visibility: hidden;
2357	}
2358
2359	.dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
2360	background: linear-gradient(to bottom, #ddd 0%, rgba(221, 221, 221, 0.2) 60%, rgba(221, 221, 221, 0) 100%);
2361	}
2362
2363	.dataviews-view-activity .dataviews-view-activity__item-type-icon {
2364	overflow: hidden;
2365	flex-shrink: 0;
2366	background-color: #fff;
2367	}
2368
2369	.dataviews-view-activity .dataviews-view-activity__item-type-icon img,
2370	.dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
2371	.dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2372	display: block;
2373	width: 100%;
2374	height: 100%;
2375	margin: 0 auto;
2376	object-fit: cover;
2377	border-radius: 50%;
2378	box-sizing: border-box;
2379	box-shadow: inset 0 0 0 1px #ddd;
2380	}
2381
2382	.dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
2383	padding: 4px;
2384	}
2385
2386	.dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2387	content: "";
2388	background-color: #ddd;
2389	}
2390
2391	.dataviews-view-activity.is-refreshing {
2392	opacity: 0.5;
2393	pointer-events: none;
2394	}
2395
2396	@media not (prefers-reduced-motion) {
2397	.dataviews-view-activity.is-refreshing {
2398	opacity: 1;
2399	animation: dataviews-pulse 1s ease-in-out infinite;
2400	}
2401	}
2402	.dataviews-view-activity + .dataviews-pagination {
2403	justify-content: space-between;
2404	}
2405
2406	.dataviews-picker-footer__bulk-selection {
2407	align-self: flex-start;
2408	height: 32px;
2409	}
2410
2411	.dataviews-picker-footer__actions {
2412	align-self: flex-end;
2413	}
2414
2415	.dataviews-controls__datetime {
2416	border: none;
2417	padding: 0;
2418	}
2419
2420	.dataviews-controls__relative-date-number,
2421	.dataviews-controls__relative-date-unit {
2422	flex: 1 1 50%;
2423	}
2424
2425	.dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
2426	.dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
2427	display: none;
2428	-webkit-appearance: none;
2429	}
2430
2431	.dataviews-controls__date-range-inputs > * {
2432	min-width: 0;
2433	}
2434
2435	.dataviews-controls__color-picker-dropdown {
2436	display: flex;
2437	}
2438
2439	.dataviews-controls__date-preset {
2440	border: 1px solid #ddd;
2441	}
2442
2443	.dataviews-controls__date-preset:active {
2444	background-color: #000;
2445	}
2446
2447	.dataforms-layouts-panel__field-trigger {
2448	position: relative;
2449	color: inherit;
2450	display: flex;
2451	width: 100%;
2452	min-height: 24px;
2453	cursor: var(--wpds-cursor-control, pointer);
2454	align-items: flex-start;
2455	border-radius: 2px;
2456	isolation: isolate;
2457	}
2458
2459	.dataforms-layouts-panel__field-trigger--label-side {
2460	flex-direction: row;
2461	gap: var(--wpds-dimension-gap-md, 12px);
2462	}
2463
2464	.dataforms-layouts-panel__field-trigger--label-top {
2465	display: grid;
2466	grid-template-columns: 1fr auto;
2467	}
2468
2469	.dataforms-layouts-panel__field-trigger--label-none {
2470	align-items: center;
2471	}
2472
2473	.dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2474	color: var(--wp-admin-theme-color);
2475	}
2476
2477	.dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
2478	opacity: 1;
2479	}
2480
2481	.dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2482	color: var(--wp-admin-theme-color);
2483	}
2484
2485	.dataforms-layouts-panel__field-trigger.is-disabled {
2486	cursor: default;
2487	}
2488
2489	.dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2490	color: #757575;
2491	font-weight: var(--wpds-typography-font-weight-regular, 400);
2492	}
2493
2494	.dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2495	opacity: 1;
2496	fill: currentColor;
2497	}
2498
2499	.dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2500	fill: var(--wp-admin-theme-color);
2501	}
2502
2503	.dataforms-layouts-panel__field-trigger-icon {
2504	padding: 0;
2505	color: var(--wp-admin-theme-color);
2506	flex: 0 0 auto;
2507	opacity: 0;
2508	border-radius: var(--wpds-border-radius-xs, 1px);
2509	}
2510
2511	.dataforms-layouts-panel__field-trigger-icon:focus-visible {
2512	opacity: 1;
2513	outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wp-admin-theme-color);
2514	}
2515
2516	.dataforms-layouts-panel__field-dropdown-anchor {
2517	width: 100%;
2518	}
2519
2520	.dataforms-layouts-panel__field-dropdown-anchor .components-dropdown {
2521	width: 100%;
2522	}
2523
2524	.dataforms-layouts-panel__field-label {
2525	width: 38%;
2526	flex-shrink: 0;
2527	min-height: 24px;
2528	display: flex;
2529	align-items: center;
2530	line-height: 20px;
2531	hyphens: auto;
2532	color: #757575;
2533	}
2534
2535	.dataforms-layouts-panel__field-label .components-base-control__label {
2536	display: inline;
2537	margin-bottom: 0;
2538	line-height: inherit;
2539	}
2540
2541	.dataforms-layouts-panel__field-label.has-error {
2542	color: #cc1818;
2543	}
2544
2545	.dataforms-layouts-panel__field-label-error-content {
2546	position: relative;
2547	z-index: 1;
2548	cursor: help;
2549	fill: #cc1818;
2550	display: inline-flex;
2551	flex-direction: row;
2552	align-items: center;
2553	gap: 4px;
2554	}
2555
2556	.dataforms-layouts-panel__field-label-error-content svg {
2557	fill: currentColor;
2558	}
2559
2560	.dataforms-layouts-panel__field-control {
2561	flex-grow: 1;
2562	min-width: 0;
2563	min-height: 24px;
2564	line-height: var(--wpds-typography-line-height-md, 24px);
2565	display: flex;
2566	align-items: center;
2567	overflow: hidden;
2568	word-break: break-word;
2569	font-weight: var(--wpds-typography-font-weight-medium, 499);
2570	}
2571
2572	.dataforms-layouts-panel__field-control > * {
2573	min-width: 0;
2574	}
2575
2576	.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2577	width: 100%;
2578	}
2579
2580	.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
2581	grid-column: 1/-1;
2582	}
2583
2584	.dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
2585	grid-row: 1;
2586	grid-column: 2;
2587	}
2588
2589	.dataforms-layouts-panel__field-dropdown .components-popover__content {
2590	min-width: 256px;
2591	padding: 16px;
2592	}
2593
2594	.dataforms-layouts-panel__dropdown-header {
2595	margin-bottom: 16px;
2596	}
2597
2598	.dataforms-layouts-panel__modal-footer {
2599	margin-top: 16px;
2600	}
2601
2602	.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2603	z-index: 159990;
2604	}
2605
2606	.dataforms-layouts-regular__field {
2607	width: 100%;
2608	min-height: 32px;
2609	justify-content: flex-start !important;
2610	align-items: flex-start !important;
2611	}
2612
2613	.dataforms-layouts-regular__field .components-base-control__label,
2614	.dataforms-layouts-regular__field .components-input-control__label,
2615	.dataforms-layouts-regular__field .components-form-token-field__label {
2616	color: #1e1e1e;
2617	}
2618
2619	.dataforms-layouts-regular__field-label {
2620	width: 38%;
2621	flex-shrink: 0;
2622	min-height: 32px;
2623	display: flex;
2624	align-items: center;
2625	line-height: 20px;
2626	hyphens: auto;
2627	}
2628
2629	.dataforms-layouts-regular__field-label--label-position-side {
2630	align-self: center;
2631	}
2632
2633	.dataforms-layouts-regular__field-label .components-base-control__label {
2634	margin-bottom: 0;
2635	}
2636
2637	.dataforms-layouts-regular__field-control {
2638	flex-grow: 1;
2639	min-height: 32px;
2640	display: flex;
2641	align-items: center;
2642	}
2643
2644	.dataforms-layouts-card__field {
2645	width: 100%;
2646	}
2647
2648	.dataforms-layouts-card__field-header-content {
2649	min-height: 24px;
2650	}
2651
2652	.dataforms-layouts-card__field-header-content-description {
2653	display: contents;
2654	}
2655
2656	.dataforms-layouts-card__field-description {
2657	color: #757575;
2658	display: block;
2659	font-size: 13px;
2660	margin-bottom: 16px;
2661	}
2662
2663	.dataforms-layouts-card__field-summary {
2664	display: flex;
2665	flex-direction: row;
2666	gap: 16px;
2667	align-items: center;
2668	}
2669
2670	.dataforms-layouts-details__summary-content {
2671	display: inline-flex;
2672	min-height: 24px;
2673	}
2674
2675	.dataforms-layouts-details__content {
2676	padding-top: 12px;
2677	}
2678
2679	.dataforms-layouts-row__field-control {
2680	width: 100%;
2681	}
2682
2683	.dataforms-layouts__wrapper {
2684	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2685	font-weight: 400;
2686	font-size: 13px;
2687	line-height: 20px;
2688	}
2689
2690	/**
2691	* Typography
2692	*/
2693	/**
2694	* SCSS Variables.
2695	*
2696	* Please use variables from this sheet to ensure consistency across the UI.
2697	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
2698	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
2699	*/
2700	/**
2701	* Colors
2702	*/
2703	/**
2704	* Fonts & basic variables.
2705	*/
2706	/**
2707	* Typography
2708	*/
2709	/**
2710	* Grid System.
2711	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
2712	*/
2713	/**
2714	* Radius scale.
2715	*/
2716	/**
2717	* Elevation scale.
2718	*/
2719	/**
2720	* Dimensions.
2721	*/
2722	/**
2723	* Mobile specific styles
2724	*/
2725	/**
2726	* Editor styles.
2727	*/
2728	/**
2729	* Block & Editor UI.
2730	*/
2731	/**
2732	* Block paddings.
2733	*/
2734	/**
2735	* React Native specific.
2736	* These variables do not appear to be used anywhere else.
2737	*/
2738	/**
2739	* Breakpoints & Media Queries
2740	*/
2741	/**
2742	* Converts a hex value into the rgb equivalent.
2743	*
2744	* @param {string} hex - the hexadecimal value to convert
2745	* @return {string} comma separated rgb values
2746	*/
2747	/**
2748	* Long content fade mixin
2749	*
2750	* Creates a fading overlay to signify that the content is longer
2751	* than the space allows.
2752	*/
2753	/**
2754	* Breakpoint mixins
2755	*/
2756	/**
2757	* Focus styles.
2758	*/
2759	/**
2760	* Applies editor left position to the selector passed as argument
2761	*/
2762	/**
2763	* Styles that are reused verbatim in a few places
2764	*/
2765	/**
2766	* Allows users to opt-out of animations via OS-level preferences.
2767	*/
2768	/**
2769	* Reset default styles for JavaScript UI based pages.
2770	* This is a WP-admin agnostic reset
2771	*/
2772	/**
2773	* Reset the WP Admin page styles for Gutenberg-like pages.
2774	*/
2775	/**
2776	* Creates a checkerboard pattern background to indicate transparency.
2777	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
2778	*/
2779	:root {
2780	--wp-block-synced-color: #7a00df;
2781	--wp-block-synced-color--rgb: 122, 0, 223;
2782	--wp-bound-block-color: var(--wp-block-synced-color);
2783	--wp-editor-canvas-background: #ddd;
2784	--wp-admin-theme-color: #007cba;
2785	--wp-admin-theme-color--rgb: 0, 124, 186;
2786	--wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
2787	--wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
2788	--wp-admin-theme-color-darker-20: #005a87;
2789	--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
2790	--wp-admin-border-width-focus: 2px;
2791	}
2792
2793	@media (min-resolution: 192dpi) {
2794	:root {
2795	--wp-admin-border-width-focus: 1.5px;
2796	}
2797	}
2798	.fields-create-template-part-modal {
2799	z-index: 1000001;
2800	}
2801
2802	.fields-create-template-part-modal__area-fieldset {
2803	border: 0;
2804	padding: 0;
2805	margin: 0;
2806	}
2807
2808	.fields-create-template-part-modal__area-radio-group {
2809	border: 1px solid #949494;
2810	border-radius: 2px;
2811	}
2812
2813	.fields-create-template-part-modal__area-radio-wrapper {
2814	position: relative;
2815	padding: 12px;
2816	display: grid;
2817	align-items: center;
2818	grid-template-columns: min-content 1fr min-content;
2819	grid-gap: 4px 8px;
2820	color: #1e1e1e;
2821	}
2822
2823	.fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
2824	border-top: 1px solid #949494;
2825	}
2826
2827	.fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
2828	position: absolute;
2829	opacity: 0;
2830	}
2831
2832	.fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
2833	z-index: 1;
2834	}
2835
2836	.fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
2837	color: var(--wp-admin-theme-color);
2838	}
2839
2840	.fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
2841	pointer-events: none;
2842	}
2843
2844	.fields-create-template-part-modal__area-radio-label::before {
2845	content: "";
2846	position: absolute;
2847	inset: 0;
2848	}
2849
2850	input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
2851	cursor: var(--wpds-cursor-control, pointer);
2852	}
2853
2854	input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
2855	outline: 4px solid transparent;
2856	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2857	}
2858
2859	.fields-create-template-part-modal__area-radio-icon,
2860	.fields-create-template-part-modal__area-radio-checkmark {
2861	fill: currentColor;
2862	}
2863
2864	input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
2865	opacity: 0;
2866	}
2867
2868	.fields-create-template-part-modal__area-radio-description {
2869	grid-column: 2/3;
2870	margin: 0;
2871	color: #757575;
2872	font-size: 12px;
2873	line-height: normal;
2874	text-wrap: pretty;
2875	}
2876
2877	input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
2878	color: inherit;
2879	}
2880
2881	fieldset.fields__media-edit {
2882	border: 0;
2883	padding: 0;
2884	margin: 0;
2885	width: 100%;
2886	}
2887
2888	fieldset.fields__media-edit .components-base-control__label {
2889	color: #1e1e1e;
2890	}
2891
2892	fieldset.fields__media-edit .fields__media-edit-description {
2893	font-size: 12px;
2894	line-height: 1.5;
2895	}
2896
2897	fieldset.fields__media-edit {
2898	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
2899	container-type: inline-size;
2900	}
2901
2902	fieldset.fields__media-edit .fields__media-edit-compact-group {
2903	border: 1px dashed #949494;
2904	border-radius: 4px;
2905	overflow: hidden;
2906	}
2907
2908	fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
2909	border-radius: 2px;
2910	}
2911
2912	fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
2913	border: 0;
2914	border-radius: 0;
2915	}
2916
2917	fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
2918	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2919	}
2920
2921	fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
2922	border-bottom: 1px solid #f0f0f0;
2923	}
2924
2925	fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
2926	display: flex;
2927	align-items: center;
2928	gap: 8px;
2929	}
2930
2931	fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2932	margin: 0;
2933	}
2934
2935	fieldset.fields__media-edit .fields__media-edit-compact {
2936	position: relative;
2937	min-width: 0;
2938	}
2939
2940	fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
2941	opacity: 1;
2942	}
2943
2944	fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
2945	position: absolute;
2946	right: 8px;
2947	top: 50%;
2948	transform: translateY(-50%);
2949	opacity: 0;
2950	pointer-events: none;
2951	z-index: 1;
2952	border-radius: 2px;
2953	background: #fff;
2954	}
2955
2956	fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
2957	pointer-events: auto;
2958	}
2959
2960	fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
2961	display: flex;
2962	align-items: center;
2963	gap: 8px;
2964	}
2965
2966	fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2967	margin: 0;
2968	}
2969
2970	fieldset.fields__media-edit .fields__media-edit-picker-button {
2971	position: relative;
2972	display: flex;
2973	align-items: center;
2974	gap: 8px;
2975	border: 1px dashed #949494;
2976	border-radius: 2px;
2977	padding: 4px 8px;
2978	min-height: 40px;
2979	cursor: var(--wpds-cursor-control, pointer);
2980	min-width: 0;
2981	}
2982
2983	fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
2984	border-color: var(--wp-admin-theme-color);
2985	color: var(--wp-admin-theme-color);
2986	}
2987
2988	fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
2989	background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
2990	color: var(--wp-admin-theme-color-darker-20);
2991	border-color: var(--wp-admin-theme-color-darker-20);
2992	}
2993
2994	fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
2995	color: var(--wp-admin-theme-color);
2996	}
2997
2998	fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
2999	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3000	outline: none;
3001	}
3002
3003	fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
3004	opacity: 0.6;
3005	cursor: default;
3006	}
3007
3008	fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
3009	position: absolute;
3010	top: 50%;
3011	left: 50%;
3012	transform: translate(-50%, -50%);
3013	z-index: 1;
3014	}
3015
3016	fieldset.fields__media-edit .fields__media-edit-filename,
3017	fieldset.fields__media-edit .fields__media-edit-placeholder {
3018	flex: 1;
3019	width: 100%;
3020	min-width: 0;
3021	}
3022
3023	fieldset.fields__media-edit .fields__media-edit-placeholder {
3024	text-align: center;
3025	}
3026
3027	fieldset.fields__media-edit .fields__media-edit-thumbnail {
3028	width: 24px;
3029	aspect-ratio: 1/1;
3030	flex-shrink: 0;
3031	border-radius: 2px;
3032	}
3033
3034	fieldset.fields__media-edit .fields__media-edit-expanded {
3035	display: grid;
3036	gap: 8px;
3037	}
3038
3039	fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
3040	display: flex;
3041	align-items: center;
3042	gap: 8px;
3043	}
3044
3045	fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3046	margin: 0;
3047	}
3048
3049	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
3050	position: relative;
3051	width: 100%;
3052	aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3053	border-radius: 2px;
3054	padding: 4px;
3055	overflow: hidden;
3056	display: flex;
3057	align-items: center;
3058	justify-content: center;
3059	}
3060
3061	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
3062	width: 100%;
3063	height: 100%;
3064	}
3065
3066	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
3067	position: absolute;
3068	top: 0;
3069	left: 0;
3070	right: 0;
3071	bottom: 0;
3072	opacity: 0;
3073	pointer-events: none;
3074	}
3075
3076	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
3077	pointer-events: auto;
3078	}
3079
3080	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
3081	position: absolute;
3082	top: 4px;
3083	right: 4px;
3084	border-radius: 2px;
3085	background: #fff;
3086	}
3087
3088	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
3089	position: relative;
3090	min-width: 0;
3091	border-radius: 4px;
3092	}
3093
3094	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
3095	opacity: 1;
3096	}
3097
3098	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
3099	padding: 8px;
3100	}
3101
3102	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3103	width: 100%;
3104	height: 100%;
3105	object-fit: cover;
3106	object-position: 50% 50%;
3107	}
3108
3109	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
3110	text-align: center;
3111	flex: none;
3112	}
3113
3114	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
3115	margin: 0;
3116	}
3117
3118	fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
3119	grid-template-columns: 1fr;
3120	}
3121
3122	fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
3123	aspect-ratio: 2/1;
3124	}
3125
3126	fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
3127	border-radius: 4px;
3128	}
3129
3130	fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
3131	border-radius: 2px;
3132	}
3133
3134	fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3135	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3136	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3137	}
3138
3139	@container (max-width: 500px) {
3140	fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3141	grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
3142	}
3143	}
3144	fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
3145	padding: 0;
3146	}
3147
3148	fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
3149	display: flex;
3150	align-items: center;
3151	justify-content: center;
3152	aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3153	}
3154
3155	.fields-controls__author-avatar {
3156	flex-shrink: 0;
3157	overflow: hidden;
3158	width: 24px;
3159	height: 24px;
3160	align-items: center;
3161	justify-content: left;
3162	display: flex;
3163	}
3164
3165	.fields-controls__author-avatar img {
3166	width: 16px;
3167	height: 16px;
3168	object-fit: cover;
3169	opacity: 0;
3170	border-radius: 100%;
3171	}
3172
3173	@media not (prefers-reduced-motion) {
3174	.fields-controls__author-avatar img {
3175	transition: opacity 0.1s linear;
3176	}
3177	}
3178	.fields-controls__author-avatar.is-loaded img {
3179	opacity: 1;
3180	}
3181
3182	.fields-controls__author-icon {
3183	display: flex;
3184	flex-shrink: 0;
3185	width: 24px;
3186	height: 24px;
3187	}
3188
3189	.fields-controls__author-icon svg {
3190	margin-left: -4px;
3191	fill: currentColor;
3192	}
3193
3194	.fields-controls__author-name {
3195	text-overflow: ellipsis;
3196	overflow: hidden;
3197	}
3198
3199	.fields-controls__slug {
3200	border: 0;
3201	padding: 0;
3202	margin: 0;
3203	}
3204
3205	.fields-controls__slug .fields-controls__slug-external-icon {
3206	margin-left: 5ch;
3207	}
3208
3209	.fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3210	padding-inline-start: 0 !important;
3211	}
3212
3213	.fields-controls__slug .fields-controls__slug-help-link {
3214	word-break: break-word;
3215	}
3216
3217	.fields-controls__slug .fields-controls__slug-help {
3218	display: flex;
3219	flex-direction: column;
3220	}
3221
3222	.fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3223	font-weight: 600;
3224	}
3225
3226	.fields-controls__featured-image-image,
3227	.fields-controls__featured-image-placeholder {
3228	width: 100%;
3229	height: 100%;
3230	display: block;
3231	border-radius: 4px;
3232	}
3233
3234	.fields-controls__featured-image-placeholder {
3235	box-shadow: none;
3236	background: #f0f0f0;
3237	}
3238
3239	.fields-controls__parent {
3240	border: 0;
3241	padding: 0;
3242	margin: 0;
3243	}
3244
3245	.fields-controls__password {
3246	border: 0;
3247	padding: 0;
3248	margin: 0;
3249	}
3250
3251	.fields-controls__status-icon {
3252	height: 24px;
3253	width: 24px;
3254	}
3255
3256	.fields-controls__status-icon svg {
3257	fill: currentColor;
3258	margin-left: -4px;
3259	}
3260
3261	.fields-field__title > span:first-child {
3262	text-overflow: ellipsis;
3263	overflow: hidden;
3264	text-decoration: none;
3265	white-space: nowrap;
3266	display: block;
3267	flex-grow: 0;
3268	}
3269
3270	.fields-field__pattern-title span:first-child {
3271	flex: 1;
3272	}
3273
3274	/**
3275	* SCSS Variables.
3276	*
3277	* Please use variables from this sheet to ensure consistency across the UI.
3278	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
3279	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
3280	*/
3281	/**
3282	* Colors
3283	*/
3284	/**
3285	* Fonts & basic variables.
3286	*/
3287	/**
3288	* Typography
3289	*/
3290	/**
3291	* Grid System.
3292	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
3293	*/
3294	/**
3295	* Radius scale.
3296	*/
3297	/**
3298	* Elevation scale.
3299	*/
3300	/**
3301	* Dimensions.
3302	*/
3303	/**
3304	* Mobile specific styles
3305	*/
3306	/**
3307	* Editor styles.
3308	*/
3309	/**
3310	* Block & Editor UI.
3311	*/
3312	/**
3313	* Block paddings.
3314	*/
3315	/**
3316	* React Native specific.
3317	* These variables do not appear to be used anywhere else.
3318	*/
3319	/**
3320	* Typography
3321	*/
3322	/**
3323	* Breakpoints & Media Queries
3324	*/
3325	/**
3326	* Converts a hex value into the rgb equivalent.
3327	*
3328	* @param {string} hex - the hexadecimal value to convert
3329	* @return {string} comma separated rgb values
3330	*/
3331	/**
3332	* Long content fade mixin
3333	*
3334	* Creates a fading overlay to signify that the content is longer
3335	* than the space allows.
3336	*/
3337	/**
3338	* Breakpoint mixins
3339	*/
3340	/**
3341	* Focus styles.
3342	*/
3343	/**
3344	* Applies editor left position to the selector passed as argument
3345	*/
3346	/**
3347	* Styles that are reused verbatim in a few places
3348	*/
3349	/**
3350	* Allows users to opt-out of animations via OS-level preferences.
3351	*/
3352	/**
3353	* Reset default styles for JavaScript UI based pages.
3354	* This is a WP-admin agnostic reset
3355	*/
3356	/**
3357	* Reset the WP Admin page styles for Gutenberg-like pages.
3358	*/
3359	/**
3360	* Creates a checkerboard pattern background to indicate transparency.
3361	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3362	*/
3363	@media (min-width: 782px) {
3364	.font-library-modal.font-library-modal {
3365	width: 65vw;
3366	}
3367	}
3368	.font-library-modal .components-modal__header {
3369	border-bottom: none;
3370	}
3371
3372	.font-library-modal .components-modal__content {
3373	padding: 0;
3374	margin-bottom: 90px;
3375	}
3376
3377	.font-library-modal .font-library__subtitle {
3378	text-transform: uppercase;
3379	font-weight: 499;
3380	font-size: 11px;
3381	}
3382
3383	.font-library-modal__tab-panel {
3384	height: calc(100% - 50px);
3385	}
3386
3387	.font-library__tabpanel-layout {
3388	height: 100%;
3389	display: flex;
3390	flex-direction: column;
3391	}
3392
3393	.font-library__tabpanel-layout > div {
3394	flex-grow: 1;
3395	}
3396
3397	.font-library__tabpanel-layout .font-library__loading {
3398	width: 100%;
3399	height: 100%;
3400	display: flex;
3401	position: absolute;
3402	left: 0;
3403	top: 0;
3404	align-items: center;
3405	justify-content: center;
3406	padding-top: 124px;
3407	box-sizing: border-box;
3408	}
3409
3410	.font-library__tabpanel-layout .components-navigator-screen {
3411	padding: 24px;
3412	width: 100%;
3413	}
3414
3415	.font-library__footer {
3416	position: absolute;
3417	width: 100%;
3418	bottom: 0;
3419	border-top: 1px solid #ddd;
3420	padding: 24px;
3421	background-color: #fff;
3422	box-sizing: border-box;
3423	flex-grow: 0 !important;
3424	flex-shrink: 0;
3425	height: 90px;
3426	}
3427
3428	.font-library__page-selection {
3429	font-size: 11px;
3430	font-weight: 499;
3431	text-transform: uppercase;
3432	}
3433
3434	@media (min-width: 600px) {
3435	.font-library__page-selection .font-library__page-selection-trigger {
3436	font-size: 11px !important;
3437	font-weight: 499;
3438	}
3439	}
3440	.font-library__fonts-title {
3441	text-transform: uppercase;
3442	font-size: 11px;
3443	font-weight: 600;
3444	margin-top: 0;
3445	margin-bottom: 0;
3446	}
3447
3448	.font-library__fonts-list {
3449	list-style: none;
3450	padding: 0;
3451	margin-top: 0;
3452	margin-bottom: 0;
3453	}
3454
3455	.font-library__fonts-list-item {
3456	margin-bottom: 0;
3457	}
3458
3459	.font-library__font-card {
3460	box-sizing: border-box;
3461	border: 1px solid #ddd;
3462	width: 100%;
3463	height: auto !important;
3464	padding: 16px;
3465	margin-top: -1px; /* To collapse the margin with the previous element */
3466	}
3467
3468	.font-library__font-card:hover {
3469	background-color: #f0f0f0;
3470	}
3471
3472	.font-library__font-card:focus {
3473	position: relative;
3474	}
3475
3476	.font-library__font-card .font-library__font-card__name {
3477	font-weight: bold;
3478	}
3479
3480	.font-library__font-card .font-library__font-card__count {
3481	color: #757575;
3482	}
3483
3484	.font-library__font-card .font-library__font-variant_demo-image {
3485	display: block;
3486	height: 24px;
3487	width: auto;
3488	}
3489
3490	.font-library__font-card .font-library__font-variant_demo-text {
3491	white-space: nowrap;
3492	flex-shrink: 0;
3493	}
3494
3495	@media not (prefers-reduced-motion) {
3496	.font-library__font-card .font-library__font-variant_demo-text {
3497	transition: opacity 0.3s ease-in-out;
3498	}
3499	}
3500	.font-library-modal__tablist-container {
3501	position: sticky;
3502	top: 0;
3503	border-bottom: 1px solid #ddd;
3504	background: #fff;
3505	z-index: 1;
3506	}
3507
3508	.font-library__upload-area {
3509	align-items: center;
3510	display: flex;
3511	justify-content: center;
3512	height: 256px !important;
3513	width: 100%;
3514	}
3515
3516	button.font-library__upload-area {
3517	background-color: #f0f0f0;
3518	}
3519
3520	.font-library__local-fonts {
3521	margin: 24px auto;
3522	width: 80%;
3523	}
3524
3525	.font-library__local-fonts .font-library__upload-area__text {
3526	color: #757575;
3527	}
3528
3529	.font-library__google-fonts-confirm {
3530	display: flex;
3531	justify-content: center;
3532	align-items: center;
3533	margin-top: 64px;
3534	}
3535
3536	.font-library__google-fonts-confirm p {
3537	line-height: 1.4;
3538	}
3539
3540	.font-library__google-fonts-confirm h2 {
3541	font-size: 1.2rem;
3542	font-weight: 400;
3543	}
3544
3545	.font-library__google-fonts-confirm .components-card {
3546	padding: 16px;
3547	width: 400px;
3548	}
3549
3550	.font-library__google-fonts-confirm .components-button {
3551	width: 100%;
3552	justify-content: center;
3553	}
3554
3555	.font-library__select-all {
3556	padding: 16px 16px 16px 17px;
3557	}
3558
3559	.font-library__select-all .components-checkbox-control__label {
3560	padding-left: 16px;
3561	}
3562
3563	.global-styles-ui-pagination .components-button.is-tertiary {
3564	width: 32px;
3565	height: 32px;
3566	justify-content: center;
3567	}
3568
3569	.global-styles-ui-screen-revisions__revisions-list {
3570	list-style: none;
3571	margin: 0 16px 16px 16px;
3572	flex-grow: 1;
3573	}
3574
3575	.global-styles-ui-screen-revisions__revisions-list li {
3576	margin-bottom: 0;
3577	}
3578
3579	.global-styles-ui-screen-revisions__revision-item {
3580	position: relative;
3581	cursor: var(--wpds-cursor-control, pointer);
3582	display: flex;
3583	flex-direction: column;
3584	}
3585
3586	.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3587	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3588	outline: 2px solid transparent;
3589	}
3590
3591	.global-styles-ui-screen-revisions__revision-item:hover {
3592	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3593	}
3594
3595	.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3596	color: var(--wp-admin-theme-color);
3597	}
3598
3599	.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3600	position: absolute;
3601	content: "\a";
3602	display: block;
3603	}
3604
3605	.global-styles-ui-screen-revisions__revision-item::before {
3606	background: #ddd;
3607	border-radius: 50%;
3608	height: 8px;
3609	width: 8px;
3610	top: 18px;
3611	left: 17px;
3612	transform: translate(-50%, -50%);
3613	z-index: 1;
3614	border: 4px solid transparent;
3615	}
3616
3617	.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3618	border-radius: 2px;
3619	outline: 3px solid transparent;
3620	outline-offset: -2px;
3621	color: var(--wp-admin-theme-color);
3622	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3623	}
3624
3625	.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3626	color: var(--wp-admin-theme-color);
3627	}
3628
3629	.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3630	background: var(--wp-admin-theme-color);
3631	}
3632
3633	.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3634	.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
3635	.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
3636	color: #1e1e1e;
3637	}
3638
3639	.global-styles-ui-screen-revisions__revision-item::after {
3640	height: 100%;
3641	left: 16px;
3642	top: 0;
3643	width: 0;
3644	border: 0.5px solid #ddd;
3645	}
3646
3647	.global-styles-ui-screen-revisions__revision-item:first-child::after {
3648	top: 18px;
3649	}
3650
3651	.global-styles-ui-screen-revisions__revision-item:last-child::after {
3652	height: 18px;
3653	}
3654
3655	.global-styles-ui-screen-revisions__revision-item-wrapper {
3656	display: block;
3657	padding: 12px 12px 4px 40px;
3658	}
3659
3660	.global-styles-ui-screen-revisions__apply-button.is-primary,
3661	.global-styles-ui-screen-revisions__applied-text {
3662	align-self: flex-start;
3663	margin: 4px 12px 12px 40px;
3664	}
3665
3666	.global-styles-ui-screen-revisions__changes,
3667	.global-styles-ui-screen-revisions__meta,
3668	.global-styles-ui-screen-revisions__applied-text {
3669	color: #757575;
3670	font-size: 12px;
3671	}
3672
3673	.global-styles-ui-screen-revisions__description {
3674	display: flex;
3675	flex-direction: column;
3676	align-items: flex-start;
3677	gap: 8px;
3678	}
3679
3680	.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3681	text-transform: uppercase;
3682	font-weight: 600;
3683	font-size: 12px;
3684	}
3685
3686	.global-styles-ui-screen-revisions__meta {
3687	display: flex;
3688	justify-content: start;
3689	width: 100%;
3690	align-items: flex-start;
3691	text-align: left;
3692	margin-bottom: 4px;
3693	}
3694
3695	.global-styles-ui-screen-revisions__meta img {
3696	width: 16px;
3697	height: 16px;
3698	border-radius: 100%;
3699	margin-right: 8px;
3700	}
3701
3702	.global-styles-ui-screen-revisions__loading {
3703	margin: 24px auto !important;
3704	}
3705
3706	.global-styles-ui-screen-revisions__changes {
3707	text-align: left;
3708	line-height: 1.4;
3709	margin-left: 12px;
3710	list-style: disc;
3711	}
3712
3713	.global-styles-ui-screen-revisions__changes li {
3714	margin-bottom: 4px;
3715	}
3716
3717	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3718	justify-content: space-between;
3719	gap: 2px;
3720	}
3721
3722	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3723	position: absolute;
3724	left: -1000px;
3725	height: 1px;
3726	margin: -1px;
3727	overflow: hidden;
3728	}
3729
3730	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3731	font-size: 12px;
3732	will-change: opacity;
3733	}
3734
3735	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3736	color: #1e1e1e;
3737	}
3738
3739	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3740	.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3741	color: #949494;
3742	}
3743
3744	.global-styles-ui-screen-revisions__footer {
3745	height: 56px;
3746	z-index: 1;
3747	position: sticky;
3748	min-width: 100%;
3749	bottom: 0;
3750	background: #fff;
3751	padding: 12px;
3752	border-top: 1px solid #ddd;
3753	box-sizing: border-box;
3754	}
3755
3756	.global-styles-ui-variations_item {
3757	box-sizing: border-box;
3758	cursor: var(--wpds-cursor-control, pointer);
3759	}
3760
3761	.global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3762	border-radius: 2px;
3763	outline: 1px solid rgba(0, 0, 0, 0.1);
3764	outline-offset: -1px;
3765	overflow: hidden;
3766	position: relative;
3767	}
3768
3769	@media not (prefers-reduced-motion) {
3770	.global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3771	transition: outline 0.1s linear;
3772	}
3773	}
3774	.global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
3775	height: 32px;
3776	}
3777
3778	.global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
3779	overflow: hidden;
3780	}
3781
3782	.global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
3783	outline-color: rgba(0, 0, 0, 0.3);
3784	}
3785
3786	.global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
3787	outline-color: #1e1e1e;
3788	outline-offset: 1px;
3789	outline-width: var(--wp-admin-border-width-focus);
3790	}
3791
3792	.global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
3793	outline-color: var(--wp-admin-theme-color);
3794	}
3795
3796	.global-styles-ui-preview__wrapper {
3797	max-width: 100%;
3798	display: block;
3799	width: 100%;
3800	}
3801
3802	.global-styles-ui-preview__wrapper.is-hoverable {
3803	cursor: var(--wpds-cursor-control, pointer);
3804	}
3805
3806	.global-styles-ui-typography-preview {
3807	display: flex;
3808	align-items: center;
3809	justify-content: center;
3810	min-height: 100px;
3811	margin-bottom: 20px;
3812	background: #f0f0f0;
3813	border-radius: 2px;
3814	overflow: hidden;
3815	}
3816
3817	.global-styles-ui-font-size__item {
3818	white-space: nowrap;
3819	text-overflow: ellipsis;
3820	overflow: hidden;
3821	line-break: anywhere;
3822	}
3823
3824	.global-styles-ui-font-size__item-value {
3825	color: #757575;
3826	}
3827
3828	.global-styles-ui-screen-typography__indicator {
3829	height: 24px;
3830	width: 24px;
3831	font-size: 14px;
3832	display: flex !important;
3833	align-items: center;
3834	justify-content: center;
3835	border-radius: 2px;
3836	}
3837
3838	.global-styles-ui-block-types-search {
3839	margin-bottom: 10px;
3840	padding: 0 16px;
3841	}
3842
3843	.global-styles-ui-screen-typography__font-variants-count {
3844	color: #757575;
3845	}
3846
3847	.global-styles-ui-font-families__manage-fonts {
3848	justify-content: center;
3849	}
3850
3851	.global-styles-ui-screen .color-block-support-panel {
3852	padding-left: 0;
3853	padding-right: 0;
3854	padding-top: 0;
3855	border-top: none;
3856	row-gap: 12px;
3857	}
3858
3859	.global-styles-ui-header {
3860	margin-bottom: 0 !important;
3861	line-height: 1.9 !important;
3862	}
3863
3864	.global-styles-ui-subtitle {
3865	margin-bottom: 0 !important;
3866	text-transform: uppercase;
3867	font-weight: 499 !important;
3868	font-size: 11px !important;
3869	}
3870
3871	.global-styles-ui-section-title {
3872	color: #2f2f2f;
3873	font-weight: 600;
3874	line-height: 1.2;
3875	padding: 16px 16px 0;
3876	margin: 0;
3877	}
3878
3879	.global-styles-ui-icon-with-current-color {
3880	fill: currentColor;
3881	}
3882
3883	.global-styles-ui__color-indicator-wrapper {
3884	height: 24px;
3885	flex-shrink: 0;
3886	}
3887
3888	.global-styles-ui__shadows-panel__options-container,
3889	.global-styles-ui__typography-panel__options-container {
3890	height: 24px;
3891	}
3892
3893	.global-styles-ui__block-preview-panel {
3894	position: relative;
3895	width: 100%;
3896	border: #ddd 1px solid;
3897	border-radius: 2px;
3898	overflow: hidden;
3899	}
3900
3901	.global-styles-ui__shadow-preview-panel {
3902	height: 144px;
3903	border: #ddd 1px solid;
3904	border-radius: 2px;
3905	overflow: auto;
3906	/rtl:begin:ignore/
3907	background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
3908	background-position: 0 0, 8px 8px;
3909	/rtl:end:ignore/
3910	background-size: 16px 16px;
3911	}
3912
3913	.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
3914	border: #ddd 1px solid;
3915	border-radius: 2px;
3916	background-color: #fff;
3917	width: 60%;
3918	height: 60px;
3919	}
3920
3921	.global-styles-ui__shadow-editor__dropdown-content {
3922	width: 280px;
3923	}
3924
3925	.global-styles-ui__shadow-editor-panel {
3926	margin-bottom: 4px;
3927	}
3928
3929	.global-styles-ui__shadow-editor__dropdown {
3930	width: 100%;
3931	position: relative;
3932	}
3933
3934	.global-styles-ui__shadow-editor__dropdown-toggle {
3935	width: 100%;
3936	height: auto;
3937	padding-top: 8px;
3938	padding-bottom: 8px;
3939	text-align: left;
3940	border-radius: inherit;
3941	}
3942
3943	.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
3944	background: #f0f0f0;
3945	color: var(--wp-admin-theme-color);
3946	}
3947
3948	.global-styles-ui__shadow-editor__remove-button {
3949	position: absolute;
3950	right: 8px;
3951	top: 8px;
3952	opacity: 0;
3953	}
3954
3955	.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
3956	border: none;
3957	}
3958
3959	.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
3960	opacity: 1;
3961	}
3962
3963	@media (hover: none) {
3964	.global-styles-ui__shadow-editor__remove-button {
3965	opacity: 1;
3966	}
3967	}
3968	.global-styles-ui-screen-css {
3969	flex: 1 1 auto;
3970	display: flex;
3971	flex-direction: column;
3972	margin: 16px;
3973	}
3974
3975	.global-styles-ui-screen-css .components-v-stack {
3976	flex: 1 1 auto;
3977	}
3978
3979	.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
3980	flex: 1 1 auto;
3981	display: flex;
3982	flex-direction: column;
3983	}
3984
3985	.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
3986	flex: 1 1 auto;
3987	display: flex;
3988	flex-direction: column;
3989	}
3990
3991	.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
3992	flex: 1 1 auto;
3993	/rtl:ignore/
3994	direction: ltr;
3995	}
3996
3997	.global-styles-ui-screen-css-help-link {
3998	display: inline-block;
3999	margin-top: 8px;
4000	}
4001
4002	.global-styles-ui-screen-variations {
4003	margin-top: 16px;
4004	border-top: 1px solid #ddd;
4005	}
4006
4007	.global-styles-ui-screen-variations > * {
4008	margin: 24px 16px;
4009	}
4010
4011	.global-styles-ui-sidebar__navigator-provider {
4012	height: 100%;
4013	}
4014
4015	.global-styles-ui-sidebar__navigator-screen {
4016	display: flex;
4017	flex-direction: column;
4018	height: 100%;
4019	}
4020
4021	.global-styles-ui-sidebar__navigator-screen .single-column {
4022	grid-column: span 1;
4023	}
4024
4025	.global-styles-ui-screen-root.global-styles-ui-screen-root,
4026	.global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4027	background: unset;
4028	color: inherit;
4029	}
4030
4031	.global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4032	fill: currentColor;
4033	}
4034
4035	.global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview {
4036	border-radius: 2px;
4037	}
4038
4039	.global-styles-ui-screen-root__active-style-tile-preview {
4040	clip-path: border-box;
4041	}
4042
4043	.global-styles-ui-color-palette-panel,
4044	.global-styles-ui-gradient-palette-panel {
4045	padding: 16px;
4046	}
4047
4048	.edit-site-custom-template-modal__contents-wrapper {
4049	height: 100%;
4050	justify-content: flex-start !important;
4051	}
4052	.edit-site-custom-template-modal__contents-wrapper > * {
4053	width: 100%;
4054	}
4055	.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4056	margin-left: -12px;
4057	margin-right: -12px;
4058	width: calc(100% + 24px);
4059	}
4060	.edit-site-custom-template-modal__contents > .components-button {
4061	height: auto;
4062	justify-content: center;
4063	}
4064	@media (min-width: 782px) {
4065	.edit-site-custom-template-modal {
4066	width: 456px;
4067	}
4068	}
4069	@media (min-width: 600px) {
4070	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4071	max-height: 224px;
4072	overflow-y: auto;
4073	}
4074	}
4075	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4076	display: block;
4077	width: 100%;
4078	text-align: left;
4079	white-space: pre-wrap;
4080	overflow-wrap: break-word;
4081	height: auto;
4082	padding: 8px 12px;
4083	}
4084	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4085	font-weight: 700;
4086	background: none;
4087	}
4088	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4089	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4090	}
4091	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4092	color: var(--wp-admin-theme-color);
4093	}
4094	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4095	color: var(--wp-admin-theme-color);
4096	}
4097	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4098	background-color: #f0f0f0;
4099	}
4100	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4101	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4102	}
4103	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4104	overflow: hidden;
4105	text-overflow: ellipsis;
4106	display: block;
4107	}
4108	.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4109	word-break: break-all;
4110	color: #757575;
4111	}
4112
4113	.edit-site-custom-template-modal__no-results {
4114	border: 1px solid #ccc;
4115	border-radius: 2px;
4116	padding: 16px;
4117	}
4118
4119	.edit-site-custom-generic-template__modal .components-modal__header {
4120	border-bottom: none;
4121	}
4122	.edit-site-custom-generic-template__modal .components-modal__content::before {
4123	margin-bottom: 4px;
4124	}
4125
4126	@media (min-width: 960px) {
4127	.edit-site-add-new-template__modal {
4128	max-width: 832px;
4129	margin-top: 64px;
4130	width: calc(100% - 128px);
4131	max-height: calc(100% - 128px);
4132	}
4133	}
4134	.edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4135	.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4136	fill: var(--wp-admin-theme-color);
4137	}
4138	.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4139	flex-grow: 1;
4140	align-items: flex-start;
4141	}
4142	.edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4143	padding: 8px;
4144	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4145	border-radius: 100%;
4146	max-height: 40px;
4147	max-width: 40px;
4148	}
4149
4150	.edit-site-custom-template-modal__contents > .components-button,
4151	.edit-site-add-new-template__template-list__contents > .components-button {
4152	padding: 32px;
4153	display: flex;
4154	flex-direction: column;
4155	border: 1px solid #ddd;
4156	justify-content: center;
4157	outline: 1px solid transparent;
4158	}
4159	.edit-site-custom-template-modal__contents > .components-button span:first-child,
4160	.edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4161	color: #1e1e1e;
4162	}
4163	.edit-site-custom-template-modal__contents > .components-button span,
4164	.edit-site-add-new-template__template-list__contents > .components-button span {
4165	color: #757575;
4166	}
4167	.edit-site-custom-template-modal__contents > .components-button:hover,
4168	.edit-site-add-new-template__template-list__contents > .components-button:hover {
4169	color: var(--wp-admin-theme-color-darker-10);
4170	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4171	border-color: transparent;
4172	}
4173	.edit-site-custom-template-modal__contents > .components-button:hover span,
4174	.edit-site-add-new-template__template-list__contents > .components-button:hover span {
4175	color: var(--wp-admin-theme-color);
4176	}
4177	.edit-site-custom-template-modal__contents > .components-button:focus,
4178	.edit-site-add-new-template__template-list__contents > .components-button:focus {
4179	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4180	border-color: transparent;
4181	outline: 3px solid transparent;
4182	}
4183	.edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4184	.edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4185	color: var(--wp-admin-theme-color);
4186	}
4187	.edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4188	.edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4189	.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4190	.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4191	grid-column: 1/-1;
4192	}
4193
4194	.edit-site-add-new-template__template-list__contents > .components-button {
4195	height: 100%;
4196	text-align: start;
4197	align-items: flex-start;
4198	}
4199
4200	.edit-site-visual-editor__editor-canvas.is-focused {
4201	outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4202	outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4203	}
4204
4205	.edit-site-canvas-loader {
4206	width: 100%;
4207	height: 100%;
4208	display: flex;
4209	position: absolute;
4210	top: 0;
4211	left: 0;
4212	opacity: 0;
4213	align-items: center;
4214	justify-content: center;
4215	}
4216	@media not (prefers-reduced-motion) {
4217	.edit-site-canvas-loader {
4218	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4219	animation-fill-mode: forwards;
4220	}
4221	}
4222	.edit-site-canvas-loader > div {
4223	width: 160px;
4224	}
4225
4226	@keyframes edit-site-canvas-loader__fade-in-animation {
4227	from {
4228	opacity: 0;
4229	}
4230	to {
4231	opacity: 1;
4232	}
4233	}
4234	.edit-site-patterns__delete-modal {
4235	width: 400px;
4236	}
4237
4238	.page-patterns-preview-field {
4239	display: flex;
4240	justify-content: center;
4241	align-items: center;
4242	flex-direction: column;
4243	height: 100%;
4244	border-radius: 4px;
4245	}
4246	.dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4247	height: 100%;
4248	}
4249	.dataviews-view-table .page-patterns-preview-field {
4250	width: 96px;
4251	flex-grow: 0;
4252	text-wrap: balance;
4253	text-wrap: pretty;
4254	}
4255
4256	.edit-site-patterns__pattern-icon {
4257	fill: var(--wp-block-synced-color);
4258	flex-shrink: 0;
4259	}
4260
4261	.edit-site-patterns__section-header {
4262	border-bottom: 1px solid #f0f0f0;
4263	padding: 16px 48px;
4264	position: sticky;
4265	top: 0;
4266	z-index: 2;
4267	flex-shrink: 0;
4268	min-height: 40px;
4269	}
4270	@media not (prefers-reduced-motion) {
4271	.edit-site-patterns__section-header {
4272	transition: padding ease-out 0.1s;
4273	}
4274	}
4275	.edit-site-patterns__section-header .edit-site-patterns__title {
4276	min-height: 40px;
4277	}
4278	.edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4279	flex-grow: 1;
4280	flex-basis: 0;
4281	white-space: nowrap;
4282	}
4283	.edit-site-patterns__section-header .edit-site-patterns__sub-title {
4284	margin-bottom: 8px;
4285	}
4286	.edit-site-patterns__section-header .screen-reader-shortcut:focus {
4287	top: 0;
4288	}
4289
4290	.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4291	background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4292	color: var(--wp-block-synced-color);
4293	}
4294
4295	.dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4296	width: 350px;
4297	}
4298	.dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4299	position: relative;
4300	}
4301	.dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4302	position: absolute;
4303	border: 1px solid var(--wp-admin-theme-color);
4304	border-bottom-left-radius: 2px;
4305	border-bottom-right-radius: 2px;
4306	box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4307	box-sizing: border-box;
4308	z-index: 1;
4309	background-color: #fff;
4310	width: calc(100% + 2px);
4311	left: -1px;
4312	min-width: initial;
4313	max-height: 96px;
4314	}
4315
4316	@media (min-width: 600px) {
4317	.dataviews-action-modal__duplicate-template-part .components-modal__frame {
4318	max-width: 500px;
4319	}
4320	}
4321
4322	@container (max-width: 430px) {
4323	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4324	padding-left: 24px;
4325	padding-right: 24px;
4326	}
4327	}
4328	.show-icon-labels .edit-site-patterns__button.has-icon {
4329	width: auto;
4330	padding: 0 var(--wpds-dimension-padding-xs, 4px);
4331	}
4332	.show-icon-labels .edit-site-patterns__button.has-icon svg {
4333	display: none;
4334	}
4335	.show-icon-labels .edit-site-patterns__button.has-icon::after {
4336	content: attr(aria-label);
4337	font-size: var(--wpds-typography-font-size-sm, 12px);
4338	}
4339
4340	.page-templates-preview-field {
4341	display: flex;
4342	justify-content: center;
4343	align-items: center;
4344	flex-direction: column;
4345	height: 100%;
4346	width: 100%;
4347	border-radius: 4px;
4348	}
4349	.dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4350	height: 120px;
4351	}
4352	.dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4353	height: 100%;
4354	}
4355	.dataviews-view-table .page-templates-preview-field {
4356	position: relative;
4357	width: 120px;
4358	max-height: 160px;
4359	text-wrap: balance;
4360	text-wrap: pretty;
4361	}
4362
4363	.edit-site-list__rename-modal {
4364	z-index: 1000001;
4365	}
4366	@media (min-width: 782px) {
4367	.edit-site-list__rename-modal .components-base-control {
4368	width: 320px;
4369	}
4370	}
4371
4372	.edit-site-editor__editor-interface {
4373	opacity: 1;
4374	}
4375	@media not (prefers-reduced-motion) {
4376	.edit-site-editor__editor-interface {
4377	transition: opacity 0.1s ease-out;
4378	}
4379	}
4380	.edit-site-editor__editor-interface.is-loading {
4381	opacity: 0;
4382	}
4383
4384	.edit-site-editor__toggle-save-panel {
4385	box-sizing: border-box;
4386	width: 280px;
4387	background-color: #fff;
4388	border: 1px dotted #ddd;
4389	padding: 24px;
4390	display: flex;
4391	justify-content: center;
4392	}
4393
4394	.edit-site-editor__view-mode-toggle {
4395	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4396	view-transition-name: toggle;
4397	/* stylelint-enable */
4398	top: 0;
4399	left: 0;
4400	height: 64px;
4401	width: 64px;
4402	z-index: 100;
4403	}
4404	.edit-site-editor__view-mode-toggle .components-button {
4405	color: #fff;
4406	height: 100%;
4407	width: 100%;
4408	border-radius: 0;
4409	overflow: hidden;
4410	padding: 0;
4411	display: flex;
4412	align-items: center;
4413	justify-content: center;
4414	}
4415	.edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4416	color: #fff;
4417	}
4418	.edit-site-editor__view-mode-toggle .components-button:focus {
4419	box-shadow: none;
4420	}
4421	.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4422	.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4423	background: #1e1e1e;
4424	display: block;
4425	}
4426
4427	.edit-site-editor__back-icon {
4428	position: absolute;
4429	top: 0;
4430	left: 0;
4431	width: 64px;
4432	height: 64px;
4433	display: flex;
4434	align-items: center;
4435	justify-content: center;
4436	background-color: hsl(0, 0%, 80%);
4437	pointer-events: none;
4438	}
4439	.edit-site-editor__back-icon svg {
4440	fill: currentColor;
4441	}
4442	.edit-site-editor__back-icon.has-site-icon {
4443	background-color: hsla(0, 0%, 100%, 0.6);
4444	backdrop-filter: saturate(180%) blur(15px);
4445	}
4446
4447	.edit-site-welcome-guide {
4448	width: 312px;
4449	}
4450	.edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4451	background: #00a0d2;
4452	}
4453	.edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4454	border-right: #3858e9 16px solid;
4455	border-top: #3858e9 16px solid;
4456	}
4457	.edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4458	border-left: #3858e9 16px solid;
4459	border-top: #3858e9 16px solid;
4460	}
4461	.edit-site-welcome-guide__image {
4462	margin: 0 0 16px;
4463	}
4464	.edit-site-welcome-guide__image > img {
4465	display: block;
4466	max-width: 100%;
4467	object-fit: cover;
4468	}
4469	.edit-site-welcome-guide__heading {
4470	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4471	font-size: 24px;
4472	line-height: 1.4;
4473	margin: 16px 0 16px 0;
4474	padding: 0 32px;
4475	}
4476	.edit-site-welcome-guide__text {
4477	font-size: 13px;
4478	line-height: 1.4;
4479	margin: 0 0 16px 0;
4480	padding: 0 32px;
4481	}
4482	.edit-site-welcome-guide__text img {
4483	vertical-align: bottom;
4484	}
4485	.edit-site-welcome-guide__inserter-icon {
4486	margin: 0 4px;
4487	vertical-align: text-top;
4488	}
4489	.edit-site-welcome-guide .components-button:hover svg {
4490	fill: #fff;
4491	}
4492
4493	.edit-site-layout {
4494	height: 100%;
4495	background: #1e1e1e;
4496	color: #ccc;
4497	display: flex;
4498	flex-direction: column;
4499	}
4500	.edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4501	background: #1e1e1e;
4502	}
4503
4504	.edit-site-layout__content {
4505	height: 100%;
4506	flex-grow: 1;
4507	display: flex;
4508	}
4509
4510	.edit-site-layout__sidebar-region {
4511	z-index: 1;
4512	width: 100vw;
4513	flex-shrink: 0;
4514	}
4515	@media (min-width: 782px) {
4516	.edit-site-layout__sidebar-region {
4517	width: 300px;
4518	}
4519	}
4520	.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4521	position: fixed !important;
4522	height: 100vh;
4523	left: 0;
4524	top: 0;
4525	}
4526	.edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4527	display: flex;
4528	flex-direction: column;
4529	height: 100%;
4530	}
4531	.edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4532	right: 0;
4533	}
4534
4535	.edit-site-layout__main {
4536	flex-grow: 1;
4537	overflow: hidden;
4538	display: flex;
4539	flex-direction: column;
4540	}
4541
4542	.edit-site-layout__mobile {
4543	position: relative;
4544	width: 100%;
4545	z-index: 2;
4546	display: flex;
4547	flex-direction: column;
4548	/*
4549	* The SiteHubMobile component is displayed
4550	* for pages that do not have a sidebar,
4551	* yet it needs the Sidebar component for the React context.
4552	*
4553	* This removes the padding in this scenario.
4554	* See https://github.com/WordPress/gutenberg/pull/63118
4555	*/
4556	}
4557	.edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4558	padding: 0;
4559	}
4560	.edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4561	padding: 0 12px;
4562	}
4563
4564	.edit-site-layout__canvas-container {
4565	position: relative;
4566	flex-grow: 1;
4567	z-index: 2;
4568	overflow: visible;
4569	}
4570
4571	.edit-site-layout__canvas {
4572	position: absolute;
4573	top: 0;
4574	left: 0;
4575	bottom: 0;
4576	width: 100%;
4577	display: flex;
4578	justify-content: center;
4579	align-items: center;
4580	}
4581	.edit-site-layout__canvas.is-right-aligned {
4582	justify-content: flex-end;
4583	}
4584	.edit-site-layout__canvas .edit-site-resizable-frame__inner {
4585	color: #1e1e1e;
4586	}
4587	@media (min-width: 782px) {
4588	.edit-site-layout__canvas {
4589	top: 16px;
4590	bottom: 16px;
4591	width: calc(100% - 16px);
4592	}
4593	.edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4594	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
4595	overflow: hidden;
4596	}
4597	}
4598	@media (min-width: 782px) and (not (prefers-reduced-motion)) {
4599	.edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4600	transition: border-radius, box-shadow 0.4s;
4601	}
4602	}
4603	@media (min-width: 782px) {
4604	.edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4605	border-radius: 8px;
4606	}
4607	.edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4608	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
4609	}
4610	}
4611	.edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4612	top: 0;
4613	bottom: 0;
4614	width: 100%;
4615	}
4616
4617	.edit-site-layout__mobile .interface-interface-skeleton,
4618	.edit-site-layout__canvas .interface-interface-skeleton,
4619	.edit-site-template-pages-preview .interface-interface-skeleton {
4620	position: relative !important;
4621	min-height: 100% !important;
4622	}
4623
4624	.edit-site-template-pages-preview {
4625	height: 100%;
4626	}
4627
4628	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4629	html.canvas-mode-edit-transition::view-transition-group(toggle) {
4630	animation-delay: 255ms;
4631	}
4632
4633	@media (prefers-reduced-motion) {
4634	::view-transition-group(*),
4635	::view-transition-old(*),
4636	::view-transition-new(*) {
4637	animation: none !important;
4638	}
4639	}
4640	/* stylelint-enable */
4641	.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4642	display: none;
4643	}
4644
4645	.edit-site-layout__view-mode-toggle.components-button {
4646	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4647	view-transition-name: toggle;
4648	/* stylelint-enable */
4649	position: relative;
4650	color: #fff;
4651	height: 64px;
4652	width: 64px;
4653	overflow: hidden;
4654	padding: 0;
4655	display: flex;
4656	align-items: center;
4657	justify-content: center;
4658	background: #1e1e1e;
4659	border-radius: 0;
4660	}
4661	.edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4662	color: #fff;
4663	}
4664	.edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4665	box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4666	outline: 4px solid rgba(0, 0, 0, 0);
4667	outline-offset: 4px;
4668	}
4669	.edit-site-layout__view-mode-toggle.components-button::before {
4670	content: "";
4671	display: block;
4672	position: absolute;
4673	top: 9px;
4674	right: 9px;
4675	bottom: 9px;
4676	left: 17px;
4677	border-radius: 4px;
4678	box-shadow: none;
4679	}
4680	@media not (prefers-reduced-motion) {
4681	.edit-site-layout__view-mode-toggle.components-button::before {
4682	transition: box-shadow 0.1s ease;
4683	}
4684	}
4685	.edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4686	display: flex;
4687	height: 64px;
4688	width: 64px;
4689	justify-content: center;
4690	align-items: center;
4691	}
4692
4693	.edit-site-layout__actions {
4694	z-index: 100000;
4695	position: fixed !important;
4696	top: -9999em;
4697	bottom: auto;
4698	left: auto;
4699	right: 0;
4700	width: 280px;
4701	color: #1e1e1e;
4702	background: #fff;
4703	}
4704	.edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4705	top: auto;
4706	bottom: 0;
4707	}
4708	.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4709	top: 0;
4710	}
4711	@media (min-width: 782px) {
4712	.edit-site-layout__actions {
4713	border-left: 1px solid #ddd;
4714	}
4715	}
4716
4717	.edit-site-layout__area {
4718	flex-grow: 1;
4719	margin: 0;
4720	overflow: hidden;
4721	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
4722	}
4723	@media (min-width: 782px) {
4724	.edit-site-layout__area {
4725	border-radius: 8px;
4726	margin: 16px 16px 16px 0;
4727	}
4728	}
4729
4730	.edit-site-layout__snackbar {
4731	position: fixed;
4732	bottom: 24px;
4733	left: 0;
4734	right: 0;
4735	padding-inline: 16px;
4736	box-sizing: border-box;
4737	display: flex;
4738	flex-direction: column;
4739	pointer-events: none;
4740	}
4741	.edit-site-layout__snackbar .components-snackbar {
4742	margin-inline: auto;
4743	}
4744
4745	.edit-site-save-hub {
4746	color: #949494;
4747	border-top: 1px solid #2f2f2f;
4748	flex-shrink: 0;
4749	margin: 0;
4750	padding: 16px 16px;
4751	}
4752
4753	.edit-site-save-hub__button {
4754	color: inherit;
4755	width: 100%;
4756	justify-content: center;
4757	}
4758	.edit-site-save-hub__button[aria-disabled=true] {
4759	opacity: 1;
4760	}
4761	.edit-site-save-hub__button[aria-disabled=true]:hover {
4762	color: inherit;
4763	}
4764	.edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4765	color: #1e1e1e;
4766	}
4767
4768	@media (min-width: 600px) {
4769	.edit-site-save-panel__modal {
4770	width: 600px;
4771	}
4772	}
4773
4774	.edit-site-sidebar__content {
4775	flex-grow: 1;
4776	overflow-y: auto;
4777	overflow-x: hidden;
4778	contain: content;
4779	}
4780
4781	@keyframes local--slide-from-right {
4782	from {
4783	transform: translateX(50px);
4784	opacity: 0;
4785	}
4786	to {
4787	transform: none;
4788	opacity: 1;
4789	}
4790	}
4791	@keyframes local--slide-from-left {
4792	from {
4793	transform: translateX(-50px);
4794	opacity: 0;
4795	}
4796	to {
4797	transform: none;
4798	opacity: 1;
4799	}
4800	}
4801	.edit-site-sidebar__screen-wrapper {
4802	overflow-x: auto;
4803	}
4804	.edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4805	width: 12px;
4806	height: 12px;
4807	}
4808	.edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4809	background-color: transparent;
4810	}
4811	.edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4812	background-color: transparent;
4813	border-radius: 8px;
4814	border: 3px solid transparent;
4815	background-clip: padding-box;
4816	}
4817	.edit-site-sidebar__screen-wrapper:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus-within::-webkit-scrollbar-thumb {
4818	background-color: #757575;
4819	}
4820	.edit-site-sidebar__screen-wrapper {
4821	scrollbar-width: thin;
4822	scrollbar-gutter: stable both-edges;
4823	scrollbar-color: transparent transparent;
4824	}
4825	.edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4826	scrollbar-color: #757575 transparent;
4827	}
4828	.edit-site-sidebar__screen-wrapper {
4829	will-change: transform;
4830	}
4831	@media (hover: none) {
4832	.edit-site-sidebar__screen-wrapper {
4833	scrollbar-color: #757575 transparent;
4834	}
4835	}
4836	.edit-site-sidebar__screen-wrapper {
4837	scrollbar-gutter: stable;
4838	display: flex;
4839	flex-direction: column;
4840	height: 100%;
4841	max-height: 100%;
4842	padding: 0 12px;
4843	animation-duration: 0.14s;
4844	animation-timing-function: ease-in-out;
4845	will-change: transform, opacity;
4846	}
4847	@media (prefers-reduced-motion: reduce) {
4848	.edit-site-sidebar__screen-wrapper {
4849	animation-duration: 0s;
4850	}
4851	}
4852	.edit-site-sidebar__screen-wrapper.slide-from-left {
4853	animation-name: local--slide-from-left;
4854	}
4855	.edit-site-sidebar__screen-wrapper.slide-from-right {
4856	animation-name: local--slide-from-right;
4857	}
4858
4859	.edit-site-sidebar-button {
4860	color: #e0e0e0;
4861	flex-shrink: 0;
4862	}
4863	.edit-site-sidebar-button:focus:not(:disabled) {
4864	box-shadow: none;
4865	outline: none;
4866	}
4867	.edit-site-sidebar-button:focus-visible:not(:disabled) {
4868	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4869	outline: 3px solid transparent;
4870	}
4871	.edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
4872	color: #f0f0f0;
4873	}
4874
4875	.edit-site-sidebar-navigation-item.components-item {
4876	color: #949494;
4877	padding: 8px 6px 8px 16px;
4878	border: none;
4879	min-height: 40px;
4880	}
4881	.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
4882	color: #e0e0e0;
4883	}
4884	.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current=true] .edit-site-sidebar-navigation-item__drilldown-indicator {
4885	fill: #e0e0e0;
4886	}
4887	.edit-site-sidebar-navigation-item.components-item[aria-current=true] {
4888	background: #2f2f2f;
4889	color: #fff;
4890	font-weight: 499;
4891	}
4892	.edit-site-sidebar-navigation-item.components-item:focus-visible {
4893	transform: translateZ(0);
4894	}
4895	.edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
4896	fill: #949494;
4897	}
4898	.edit-site-sidebar-navigation-item.components-item.with-suffix {
4899	padding-right: 16px;
4900	}
4901
4902	.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
4903	cursor: grab;
4904	padding: 8px 8px 8px 0;
4905	}
4906
4907	.edit-site-sidebar-navigation-screen {
4908	display: flex;
4909	flex-direction: column;
4910	overflow-x: unset !important;
4911	position: relative;
4912	}
4913
4914	.edit-site-sidebar-navigation-screen__main {
4915	flex-grow: 1;
4916	margin-bottom: 16px;
4917	}
4918	.edit-site-sidebar-navigation-screen__main.has-footer {
4919	margin-bottom: 0;
4920	}
4921
4922	.edit-site-sidebar-navigation-screen__content {
4923	padding: 0 16px;
4924	}
4925	.edit-site-sidebar-navigation-screen__content .components-text {
4926	color: #ccc;
4927	}
4928	.edit-site-sidebar-navigation-screen__content .components-heading {
4929	margin-bottom: 8px;
4930	}
4931
4932	.edit-site-sidebar-navigation-screen__title-icon {
4933	position: sticky;
4934	top: 0;
4935	background: #1e1e1e;
4936	padding-top: 48px;
4937	margin-bottom: 8px;
4938	padding-bottom: 8px;
4939	z-index: 1;
4940	}
4941
4942	.edit-site-sidebar-navigation-screen__title {
4943	flex-grow: 1;
4944	overflow-wrap: break-word;
4945	}
4946	.edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
4947	line-height: 32px;
4948	}
4949
4950	.edit-site-sidebar-navigation-screen__actions {
4951	display: flex;
4952	flex-shrink: 0;
4953	}
4954
4955	@media (min-width: 782px) {
4956	.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
4957	max-width: 292px;
4958	}
4959	}
4960
4961	.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
4962	outline-color: rgba(255, 255, 255, 0.05);
4963	}
4964	.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
4965	outline-color: rgba(255, 255, 255, 0.15);
4966	}
4967	.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
4968	outline-color: #fff;
4969	}
4970	.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
4971	outline-color: var(--wp-admin-theme-color);
4972	}
4973
4974	.edit-site-sidebar-navigation-screen__footer {
4975	position: sticky;
4976	bottom: 0;
4977	background-color: #1e1e1e;
4978	gap: 0;
4979	padding: 8px 16px;
4980	margin: 16px 0 0;
4981	border-top: 1px solid #2f2f2f;
4982	}
4983	.edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
4984	margin-left: -16px;
4985	margin-right: -16px;
4986	}
4987
4988	/* In general style overrides are discouraged.
4989	* This is a temporary solution to override the InputControl component's styles.
4990	* The `Theme` component will potentially be the more appropriate approach
4991	* once that component is stabilized.
4992	* See: packages/components/src/theme
4993	*/
4994	.edit-site-sidebar-navigation-screen__input-control {
4995	width: 100%;
4996	}
4997	.edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
4998	background: #2f2f2f;
4999	}
5000	.edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5001	color: #e0e0e0 !important;
5002	}
5003	.edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5004	color: #e0e0e0 !important;
5005	background: #2f2f2f !important;
5006	}
5007	.edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5008	border: 4px !important;
5009	}
5010	.edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5011	color: #949494;
5012	}
5013
5014	.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5015	.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5016	.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5017	background: none;
5018	}
5019
5020	.sidebar-navigation__more-menu .components-button {
5021	color: #e0e0e0;
5022	}
5023	.sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5024	color: #f0f0f0;
5025	}
5026
5027	.edit-site-sidebar-navigation-screen-patterns__group {
5028	margin-bottom: 24px;
5029	margin-left: -16px;
5030	margin-right: -16px;
5031	}
5032	.edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5033	border-bottom: 0;
5034	padding-bottom: 0;
5035	margin-bottom: 0;
5036	}
5037
5038	.edit-site-sidebar-navigation-screen-patterns__group-header {
5039	margin-top: 16px;
5040	}
5041	.edit-site-sidebar-navigation-screen-patterns__group-header p {
5042	color: #949494;
5043	}
5044	.edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5045	font-size: 11px;
5046	font-weight: 499;
5047	text-transform: uppercase;
5048	}
5049
5050	.edit-site-sidebar-navigation-screen-patterns__divider {
5051	border-top: 1px solid #2f2f2f;
5052	margin: 16px 0;
5053	}
5054
5055	.edit-site-sidebar-navigation-screen__description {
5056	margin: 0 0 32px 0;
5057	}
5058
5059	.edit-site-sidebar-navigation-screen-navigation-menus {
5060	margin-left: -16px;
5061	margin-right: -16px;
5062	}
5063
5064	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5065	white-space: normal;
5066	}
5067	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5068	margin-top: 3px;
5069	}
5070	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5071	padding-right: 0;
5072	}
5073	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5074	color: #949494;
5075	}
5076	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
5077	color: #fff;
5078	}
5079	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5080	color: #949494;
5081	}
5082	.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
5083	color: #fff;
5084	}
5085
5086	.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5087	margin-left: auto;
5088	margin-right: auto;
5089	display: block;
5090	}
5091
5092	.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5093	display: none;
5094	}
5095
5096	.edit-site-sidebar-navigation-screen-main {
5097	margin-left: -16px;
5098	margin-right: -16px;
5099	}
5100
5101	.edit-site-sidebar-navigation-screen-templates-browse {
5102	margin-left: -16px;
5103	margin-right: -16px;
5104	}
5105
5106	.edit-site-sidebar-dataviews {
5107	margin-left: -16px;
5108	margin-right: -16px;
5109	}
5110
5111	.edit-site-site-hub {
5112	display: flex;
5113	align-items: center;
5114	justify-content: space-between;
5115	gap: 8px;
5116	margin-right: 12px;
5117	height: 64px;
5118	}
5119
5120	.edit-site-site-hub__actions {
5121	flex-shrink: 0;
5122	}
5123
5124	.edit-site-site-hub__view-mode-toggle-container {
5125	height: 64px;
5126	width: 64px;
5127	flex-shrink: 0;
5128	}
5129	.edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5130	background: transparent;
5131	}
5132
5133	.edit-site-site-hub__title .components-button {
5134	color: #e0e0e0;
5135	display: block;
5136	flex-grow: 1;
5137	font-size: 15px;
5138	font-weight: 499;
5139	overflow: hidden;
5140	padding-right: 16px;
5141	margin-left: -4px;
5142	position: relative;
5143	text-decoration: none;
5144	text-overflow: ellipsis;
5145	white-space: nowrap;
5146	}
5147	.edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5148	color: #e0e0e0;
5149	}
5150	.edit-site-site-hub__title .components-button:focus {
5151	box-shadow: none;
5152	outline: none;
5153	}
5154	.edit-site-site-hub__title .components-button:focus-visible {
5155	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5156	outline: 2px solid transparent;
5157	outline-offset: 2px;
5158	}
5159	.edit-site-site-hub__title .components-button::after {
5160	content: "↗";
5161	font-weight: 400;
5162	opacity: 0;
5163	position: absolute;
5164	right: 0;
5165	}
5166	@media not (prefers-reduced-motion) {
5167	.edit-site-site-hub__title .components-button::after {
5168	transition: opacity 0.1s linear;
5169	}
5170	}
5171	.edit-site-site-hub__title .components-button:hover::after, .edit-site-site-hub__title .components-button:focus::after, .edit-site-site-hub__title .components-button:active::after {
5172	opacity: 1;
5173	}
5174
5175	.edit-site-site-hub_toggle-command-center {
5176	color: #e0e0e0;
5177	}
5178	.edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5179	fill: #f0f0f0;
5180	}
5181
5182	.edit-site-site-icon__icon {
5183	fill: currentColor;
5184	width: 100%;
5185	height: 100%;
5186	}
5187	.edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5188	padding: 12px;
5189	}
5190
5191	.edit-site-site-icon__image {
5192	width: 100%;
5193	height: 100%;
5194	object-fit: cover;
5195	background: #333;
5196	aspect-ratio: 1/1;
5197	}
5198	.edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5199	border-radius: 0;
5200	}
5201
5202	.edit-site-editor__view-mode-toggle button:focus {
5203	position: relative;
5204	}
5205	.edit-site-editor__view-mode-toggle button:focus::before {
5206	content: "";
5207	display: block;
5208	position: absolute;
5209	z-index: 1;
5210	top: 0;
5211	right: 0;
5212	bottom: 0;
5213	left: 0;
5214	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
5215	}
5216
5217	.fields-controls__password {
5218	border-top: 1px solid #e0e0e0;
5219	padding-top: 16px;
5220	}
5221
5222	.dataviews-action-modal__quick-edit {
5223	justify-content: flex-end;
5224	align-items: stretch;
5225	}
5226	.dataviews-action-modal__quick-edit .components-modal__frame {
5227	margin: 16px 16px 16px 0;
5228	height: calc(100% - 32px);
5229	max-height: calc(100% - 32px);
5230	max-width: 400px;
5231	border-radius: 8px;
5232	position: relative;
5233	animation-name: none;
5234	}
5235	@media (prefers-reduced-motion: no-preference) {
5236	.dataviews-action-modal__quick-edit .components-modal__frame {
5237	animation-name: quick-edit-slide-in-right;
5238	animation-duration: 0.2s;
5239	animation-timing-function: ease-out;
5240	}
5241	}
5242	.dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5243	animation-name: none;
5244	}
5245	@media (prefers-reduced-motion: no-preference) {
5246	.dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5247	animation-name: quick-edit-slide-out-right;
5248	animation-duration: 0.2s;
5249	animation-timing-function: ease-out;
5250	}
5251	}
5252	.dataviews-action-modal__quick-edit .components-modal__content {
5253	display: flex;
5254	flex-direction: column;
5255	overflow: hidden;
5256	padding: 0;
5257	}
5258	.dataviews-action-modal__quick-edit .components-modal__content > * {
5259	display: flex;
5260	flex-direction: column;
5261	flex: 1;
5262	min-height: 0;
5263	}
5264	.dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5265	padding: 24px 24px 0;
5266	}
5267	.dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5268	flex: 1;
5269	min-height: 0;
5270	overflow-y: auto;
5271	padding-top: 16px;
5272	}
5273	.dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5274	flex: 1;
5275	padding: 0 24px 4px;
5276	}
5277	.dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5278	position: sticky;
5279	bottom: 0;
5280	flex-shrink: 0;
5281	padding: 16px 24px 24px;
5282	}
5283	.dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5284	flex: 1;
5285	justify-content: center;
5286	}
5287
5288	@keyframes quick-edit-slide-in-right {
5289	from {
5290	transform: translateX(100%);
5291	}
5292	to {
5293	transform: translateX(0);
5294	}
5295	}
5296	@keyframes quick-edit-slide-out-right {
5297	from {
5298	transform: translateX(0);
5299	}
5300	to {
5301	transform: translateX(100%);
5302	}
5303	}
5304	.edit-site-resizable-frame__inner {
5305	position: relative;
5306	}
5307	body:has(.edit-site-resizable-frame__inner.is-resizing) {
5308	cursor: col-resize;
5309	-webkit-user-select: none;
5310	user-select: none;
5311	}
5312
5313	.edit-site-resizable-frame__inner.is-resizing::before {
5314	position: absolute;
5315	z-index: 1;
5316	inset: 0;
5317	content: "";
5318	}
5319
5320	.edit-site-resizable-frame__inner-content {
5321	position: absolute;
5322	z-index: 0;
5323	inset: 0;
5324	}
5325
5326	.edit-site-resizable-frame__handle {
5327	align-items: center;
5328	background-color: rgba(117, 117, 117, 0.4);
5329	border: 0;
5330	border-radius: 4px;
5331	cursor: col-resize;
5332	display: flex;
5333	height: 64px;
5334	justify-content: flex-end;
5335	padding: 0;
5336	position: absolute;
5337	top: calc(50% - 32px);
5338	width: 4px;
5339	z-index: 100;
5340	}
5341	.edit-site-resizable-frame__handle::before {
5342	content: "";
5343	height: 100%;
5344	left: 100%;
5345	position: absolute;
5346	width: 32px;
5347	}
5348	.edit-site-resizable-frame__handle::after {
5349	content: "";
5350	height: 100%;
5351	position: absolute;
5352	right: 100%;
5353	width: 32px;
5354	}
5355	.edit-site-resizable-frame__handle:focus-visible {
5356	outline: 2px solid transparent;
5357	}
5358	.edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5359	background-color: var(--wp-admin-theme-color);
5360	}
5361
5362	.edit-site-pagination .components-button.is-tertiary {
5363	width: 32px;
5364	height: 32px;
5365	justify-content: center;
5366	}
5367
5368	.edit-site-styles .global-styles-ui-screen-root {
5369	box-shadow: none;
5370	}
5371	.edit-site-styles .global-styles-ui-screen-root > div > hr {
5372	display: none;
5373	}
5374	.edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5375	border-top: none;
5376	}
5377	.edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5378	overflow-y: auto;
5379	padding-left: 0;
5380	padding-right: 0;
5381	}
5382	.edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5383	padding-top: 12px;
5384	padding-left: 12px;
5385	padding-right: 12px;
5386	padding-bottom: 12px;
5387	outline: none;
5388	}
5389	.edit-site-styles .edit-site-sidebar-button {
5390	color: #1e1e1e;
5391	}
5392
5393	.show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5394	width: auto;
5395	padding: 0 var(--wpds-dimension-padding-xs, 4px);
5396	}
5397	.show-icon-labels .edit-site-styles__header-actions .components-button.has-icon svg {
5398	display: none;
5399	}
5400	.show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5401	content: attr(aria-label);
5402	font-size: var(--wpds-typography-font-size-sm, 12px);
5403	}
5404
5405	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5406	::view-transition-image-pair(root) {
5407	isolation: auto;
5408	}
5409
5410	::view-transition-old(root),
5411	::view-transition-new(root) {
5412	animation: none;
5413	mix-blend-mode: normal;
5414	display: block;
5415	}
5416
5417	/* stylelint-enable */
5418	body.js #wpadminbar {
5419	display: none;
5420	}
5421
5422	body.js #wpbody {
5423	padding-top: 0;
5424	}
5425
5426	body.js.appearance_page_gutenberg-template-parts,
5427	body.js.site-editor-php {
5428	background: #fff;
5429	}
5430	body.js.appearance_page_gutenberg-template-parts #wpcontent,
5431	body.js.site-editor-php #wpcontent {
5432	padding-left: 0;
5433	}
5434	body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5435	body.js.site-editor-php #wpbody-content {
5436	padding-bottom: 0;
5437	}
5438	body.js.appearance_page_gutenberg-template-parts,
5439	body.js.site-editor-php {
5440	/* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5441	Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5442	}
5443	body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5444	body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5445	display: none;
5446	}
5447	body.js.appearance_page_gutenberg-template-parts #wpfooter,
5448	body.js.site-editor-php #wpfooter {
5449	display: none;
5450	}
5451	body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5452	body.js.site-editor-php .a11y-speak-region {
5453	left: -1px;
5454	top: -1px;
5455	}
5456	body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5457	body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5458	body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5459	body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5460	border-right-color: #fff;
5461	}
5462	body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5463	body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5464	width: auto;
5465	max-width: 100%;
5466	}
5467
5468	body.js.site-editor-php {
5469	background: #1e1e1e;
5470	}
5471
5472	.edit-site {
5473	box-sizing: border-box;
5474	}
5475	.edit-site *,
5476	.edit-site *::before,
5477	.edit-site *::after {
5478	box-sizing: inherit;
5479	}
5480	.edit-site {
5481	height: 100vh;
5482	}
5483	@media (min-width: 600px) {
5484	.edit-site {
5485	bottom: 0;
5486	left: 0;
5487	min-height: 100vh;
5488	position: fixed;
5489	right: 0;
5490	top: 0;
5491	}
5492	}
5493	.no-js .edit-site {
5494	min-height: 0;
5495	position: static;
5496	}
5497	.edit-site .interface-interface-skeleton {
5498	top: 0;
5499	}