style.scss

@import "../../interface/src/style.scss";

@import "./components/block-editor/style.scss";
@import "./components/code-editor/style.scss";
@import "./components/global-styles/style.scss";
@import "./components/header/style.scss";
@import "./components/header/document-actions/style.scss";
@import "./components/navigation-sidebar/navigation-toggle/style.scss";
@import "./components/navigation-sidebar/navigation-panel/style.scss";
@import "./components/list/style.scss";
@import "./components/add-new-template/style.scss";
@import "./components/sidebar/style.scss";
@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/navigation-menu-sidebar/style.scss";
@import "./components/sidebar/template-card/style.scss";
@import "./components/editor/style.scss";
@import "./components/template-details/style.scss";
@import "./components/create-template-part-modal/style.scss";
@import "./components/secondary-sidebar/style.scss";
@import "./components/welcome-guide/style.scss";
@import "./components/keyboard-shortcut-help-modal/style.scss";

// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
html.wp-toolbar {
	background: $white;
}

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

.edit-site,
// The modals are shown outside the .edit-site wrapper, they need these styles.
.components-modal__frame {
	@include reset;
}

.edit-site {
	// 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;
		min-height: 100vh;
		position: absolute;
		right: 0;
		top: 0;
	}

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

	// Todo: Remove this rule when edit site gets support
	// for opening unpinned sidebar items.
	.interface-complementary-area__pin-unpin-item.components-button {
		display: none;
	}

	.interface-interface-skeleton__content {
		background-color: $gray-800;
	}
}

/**
 * Animations
 */

// These keyframes should not be part of the _animations.scss mixins file.
// Because keyframe animations can't be defined as mixins properly, they are duplicated.
// Since they are intended only for the editor, we add them here instead.
@keyframes edit-post__fade-in-animation {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@include wordpress-admin-schemes();