@use "@wordpress/base-styles/variables" as *;

.editor-visual-editor {
	position: relative;
	display: flex;
	max-height: 100%;

	// This duplicates the iframe background but it's necessary in some situations
	// when the iframe doesn't cover the whole canvas
	// like the "focused entities".
	background-color: var(--wp-editor-canvas-background);

	// This overrides the iframe background since it's applied again here
	// It also prevents some style glitches if `editor-visual-editor`
	// like when hovering the preview in the site editor.
	iframe[name="editor-canvas"] {
		background-color: transparent;
	}

	// Centralize the editor.
	flex-direction: column;
	align-items: center;
	justify-content: center;

	@media (prefers-reduced-motion: no-preference) {
		transition: padding 0.2s ease-out;
	}

	&.has-vertical-padding {
		padding-top: $grid-unit-30;
		padding-bottom: $grid-unit-30;
	}

	&.has-horizontal-padding {
		padding-left: $grid-unit-30;
		padding-right: $grid-unit-30;
	}

	// Keeps extra scrollbars from appearing when block toolbars overflow.
	overflow: hidden;

	// The button element easily inherits styles that are meant for the editor style.
	// These rules enhance the specificity to reduce that inheritance.
	// This is duplicated in edit-site.
	& .components-button {
		font-family: $default-font;
		font-size: $default-font-size;
		padding: 6px 12px;

		&.is-tertiary,
		&.has-icon {
			padding: 6px;
		}
	}
}