@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/default-custom-properties";
@use "@wordpress/dataviews/build-style/style.css" as dataviews;
@use "@wordpress/fields/build-style/style.css" as fields;
@use "@wordpress/global-styles-ui/build-style/style.css" as global-styles-ui;
@use "./components/add-new-template/style.scss" as *;
@use "./components/block-editor/style.scss" as *;
@use "./components/canvas-loader/style.scss" as *;
@use "./components/page-patterns/style.scss" as *;
@use "./components/page-templates/style.scss" as *;
@use "./components/editor/style.scss" as *;
@use "./components/welcome-guide/style.scss" as *;
@use "./components/layout/style.scss" as *;
@use "./components/save-hub/style.scss" as *;
@use "./components/save-panel/style.scss" as *;
@use "./components/sidebar/style.scss" as *;
@use "./components/sidebar-button/style.scss" as *;
@use "./components/sidebar-navigation-item/style.scss" as *;
@use "./components/sidebar-navigation-screen/style.scss" as *;
@use "./components/sidebar-navigation-screen-details-footer/style.scss" as *;
@use "./components/sidebar-navigation-screen-navigation-menu/style.scss" as *;
@use "./components/sidebar-navigation-screen-patterns/style.scss" as *;
@use "./components/sidebar-navigation-screen-navigation-menus/style.scss" as *;
@use "./components/sidebar-navigation-screen-main/style.scss" as *;
@use "./components/sidebar-dataviews/style.scss" as *;
@use "./components/site-hub/style.scss" as *;
@use "./components/post-list/style.scss" as *;
@use "./components/resizable-frame/style.scss" as *;
@use "./components/pagination/style.scss" as *;
@use "./components/sidebar-global-styles/style.scss" as *;
@use "./components/sidebar-identity/style.scss" as *;

::view-transition-image-pair(root) {
	isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
	display: block;
}

// stylelint-disable selector-class-pattern -- WordPress admin body classes use underscores by convention.
body.js #wpbody {
	padding-top: 0;
}

body.js.appearance_page_gutenberg-template-parts,
body.js.site-editor-php {
	@include wp-admin-reset(".edit-site");
}

body.js.site-editor-php {
	background: var(--wpds-color-background-surface-neutral-weak);

	@include break-medium {
		// Relayed through a custom property to keep `body` the subject of its
		// own `:has()`. With `body:has(…) #wpadminbar`, every DOM change in the
		// editor recalculates the whole document.
		&:has(.editor-editor-interface.is-distraction-free) {
			--wp-admin--admin-bar--height: 0px;
			--wp-editor-admin-bar-display: none;
		}

		#wpadminbar {
			display: var(--wp-editor-admin-bar-display, block);
		}
	}
}
// stylelint-enable selector-class-pattern

.edit-site {
	@include reset;
	padding-top: var(--wp-admin--admin-bar--height, 0);
	height: 100vh;

	// On mobile the main content area has to scroll, otherwise you can invoke
	// the over-scroll bounce on the non-scrolling container, for a bad experience.
	@include break-small {
		bottom: 0;
		left: 0;
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		padding-top: 0;
		position: fixed;
		right: 0;
		top: var(--wp-admin--admin-bar--height, 0);
	}

	.no-js & {
		min-height: 0;
		position: static;
	}

	.interface-interface-skeleton {
		top: 0;
	}
}