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

.editor-visual-editor {
	position: relative;
	display: flex;

	// 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 horizontally (flex-direction is column).
	align-items: center;

	&.is-resizable {
		max-height: 100%;
	}

	&.has-padding {
		padding: $grid-unit-30 $grid-unit-30 0;
	}

	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
	&.is-iframed {
		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;
		}
	}
}