$empty-paragraph-height: $text-editor-font-size * 4;

.editor-default-block-appender {
	input[type=text].editor-default-block-appender__content { // needs specificity
		border: none;
		background: none;
		box-shadow: none;
		display: block;
		margin: 0;
		max-width: none; // fixes a bleed issue from the admin
		padding: $block-padding;
		height: $empty-paragraph-height;
		font-size: $editor-font-size;
		font-family: $editor-font;
		cursor: text;
		width: 100%;
		color: $dark-gray-300;
		font-family: $editor-font;
		outline: 1px solid transparent;
		transition: 0.2s outline;
	}

	// Show quick insertion icons faded until hover
	.editor-inserter-with-shortcuts {
		.components-icon-button {
			color: $light-gray-700;
			transition: color 0.2s;
		}
	}

	// Don't show inserter until mousing
	.editor-inserter {
		opacity: 0;
	}

	&:hover {
		.editor-inserter-with-shortcuts {
			opacity: 1;

			.components-icon-button {
				color: $dark-gray-500;
			}
		}

		.editor-inserter {
			opacity: 1;
		}
	}

	// Dropzone
	.components-drop-zone__content-icon {
		display: none;
	}
}

// Left side inserter icon
.editor-block-list__empty-block-inserter,
.editor-default-block-appender .editor-inserter {
	position: absolute;
		top: $item-spacing;
		right: $item-spacing;	// show on the right on mobile
	transition: opacity 0.2s;

	@include break-small {
		left: -$block-side-ui-padding;
		right: auto;
	}

	.editor-inserter__toggle {
		border-radius: 50%;
	}

	&:disabled {
		display: none;
	}
}

// Quick block insertion icons on the right
.editor-inserter-with-shortcuts {
	position: absolute;
	top: $item-spacing;
	right: $block-padding;
	display: none;

	@include break-small {
		right: 0;
		display: flex;
	}
}
