@use "@wordpress/base-styles/default-custom-properties";
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "./components/layout/style.scss" as *;
@use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
@use "./components/welcome-guide/style.scss" as *;

body.js.block-editor-page {
	@include wp-admin-reset( ".block-editor" );

	&.is-fullscreen-mode {
		@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);
			}
		}
	}
}

// Fix issue with wp-admin menu not scrolling between 170% and 200% zoom.
.block-editor-page #wpwrap {
	overflow-y: auto;
	@include break-medium() {
		overflow-y: initial;
	}
}

.edit-post-visual-editor {
	@include reset;
}

.block-editor__container {
	// On mobile the main content area has to scroll, otherwise you can invoke
	// the overscroll bounce on the non-scrolling container, for a bad experience.
	@include break-small {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		min-height: calc(100vh - #{$admin-bar-height-big});
	}

	// The WP header height changes at this breakpoint.
	@include break-medium {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	}

	img {
		max-width: 100%;
		height: auto;
	}
}