.edit-post-visual-editor {
	position: relative;
	padding: 50px 0;

	& .components-button {
		font-family: $default-font;
	}
}

.edit-post-visual-editor .block-editor-writing-flow__click-redirect {
	// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
	height: 50px;
	width: 100%;
	// Offset for: Visual editor padding, block (default appender) margin.
	margin: #{ -1 * $block-spacing } auto -50px;
}

// The base width of blocks
.edit-post-visual-editor .block-editor-block-list__block {
	margin-left: auto;
	margin-right: auto;

	@include break-small() {
		// Compensate for side UI width.
		.block-editor-block-list__block-edit {
			margin-left: -$block-side-ui-width;
			margin-right: -$block-side-ui-width;
		}

		// Center the block toolbar on wide and full-wide blocks.
		// Use specific selector to not affect nested block toolbars.
		&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
			height: 0; // This collapses the container to an invisible element without margin.
			width: 100%;
			margin-left: 0;
			margin-right: 0;
			text-align: center;

			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
			// This is necessary because otherwise the mere presence of the toolbar can push down content.
			// Pairs with relative rule on line 49.
			float: left;

			.block-editor-block-toolbar {
				max-width: $content-width;
				width: 100%;

				// Necessary for the toolbar to be centered.
				// This unsets an absolute position that will otherwise left align the toolbar.
				position: relative;
			}
		}
	}
}

// The base width of the title should match that of blocks even if it isn't a block
.editor-post-title {
	@include break-small() {
		padding-left: $block-container-side-padding;
		padding-right: $block-container-side-padding;
	}
}
.edit-post-visual-editor .editor-post-title__block {
	margin-left: auto;
	margin-right: auto;

	// Space title similarly to other blocks.
	// This uses negative margins so as to not affect the default block margins.
	margin-bottom: -$block-padding - $block-spacing - $border-width - $border-width;

	// Stack borders.
	> div {
		margin-left: 0;
		margin-right: 0;
	}

	// Stretch to mimic outline padding on desktop.
	@include break-small() {
		> div {
			margin-left: -$block-side-ui-clearance;
			margin-right: -$block-side-ui-clearance;
		}
	}
}

.edit-post-visual-editor {
	// If the first block is floated, it needs top margin, unlike the rule in line 69.
	.block-editor-block-list__layout > .block-editor-block-list__block[data-align="left"]:first-child,
	.block-editor-block-list__layout > .block-editor-block-list__block[data-align="right"]:first-child {
		margin-top: $block-padding + $block-spacing + $border-width + $border-width + $block-padding;
	}

	.block-editor-default-block-appender {
		// Default to centered and content-width, like blocks
		margin-left: auto;
		margin-right: auto;
		position: relative;

		&[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
			// Outline on root-level default block appender is redundant with the
			// WritingFlow click redirector.
			outline: 1px solid transparent;
		}
	}

	// Ensure that the height of the first appender, and the one between blocks, is the same as text.
	.block-editor-block-list__block[data-type="core/paragraph"] p[data-is-placeholder-visible="true"] + p,
	.block-editor-default-block-appender__content {
		min-height: $empty-paragraph-height / 2;
		line-height: $editor-line-height;
	}
}