style.scss

.block-editor-block-list__layout .components-draggable__clone {
	// Hide the Block UI when dragging the block.
	// This ensures the page scroll properly (no sticky elements).
	.block-editor-block-contextual-toolbar {
		// It's probably okay to use !important here to avoid over-complicating the selector.
		display: none !important;
	}
}

.block-editor-block-list__layout .block-editor-block-list__block.is-selected { // Needs specificity to override inherited styles.
	// While block is being dragged, dim the slot dragged from, and hide some UI.
	&.is-dragging {
		.block-editor-block-list__block-edit::before {
			border: none;
		}

		> .block-editor-block-list__block-edit > * {
			background: $light-gray-100;
		}

		> .block-editor-block-list__block-edit > * > * {
			visibility: hidden;
		}

		.block-editor-block-mover,
		.block-editor-block-contextual-toolbar {
			display: none;
		}
	}

	> .block-editor-block-list__block-edit .reusable-block-edit-panel * {
		z-index: z-index(".block-editor-block-list__block-edit .reusable-block-edit-panel *");
	}
}


/**
 * General layout
 */

.block-editor-block-list__layout {
	// Make room in the main content column for the side UI.
	// The side UI uses negative margins to position itself so as to not affect the block width.
	@include break-small() {
		padding-left: $block-container-side-padding;
		padding-right: $block-container-side-padding;
	}

	// Don't add side padding for nested blocks.
	.block-editor-block-list__block & {
		// Compensate for side UI.
		padding-left: 0;
		padding-right: 0;

		// Compensate for block padding.
		margin-left: -$block-padding;
		margin-right: -$block-padding;
	}
}

.block-editor-block-list__layout .block-editor-block-list__block {
	position: relative;
	padding-left: $block-padding;
	padding-right: $block-padding;

	// Break long strings of text without spaces so they don't overflow the block.
	overflow-wrap: break-word;

	@include break-small() {
		// The block mover needs to stay inside the block to allow clicks when hovering the block-.
		padding-left: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
		padding-right: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
	}

	/**
	 * Notices
	 */

	.components-placeholder .components-with-notices-ui {
		margin: -10px 20px 12px 20px;
		width: calc(100% - 40px);
	}

	.components-with-notices-ui {
		margin: 0 0 12px 0;
		width: 100%;

		.components-notice {
			margin-left: 0;
			margin-right: 0;

			.components-notice__content {
				font-size: $default-font-size;
			}
		}
	}

	/**
	 * Block border layout
	 */

	.block-editor-block-list__block-edit {
		position: relative;

		&::before {
			z-index: z-index(".block-editor-block-list__block-edit::before");
			content: "";
			position: absolute;
			border: $border-width solid transparent;
			border-left: none;
			box-shadow: none;
			transition: border-color 0.1s linear, box-shadow 0.1s linear;
			pointer-events: none;

			// Include a transparent outline for Windows High Contrast mode.
			outline: $border-width solid transparent;

			// Go edge-to-edge on mobile.
			right: -$block-padding;
			left: -$block-padding;
			top: -$block-padding;
			bottom: -$block-padding;
		}
	}

	// Selected style.
	&.is-selected {

		> .block-editor-block-list__block-edit::before {
			// Use opacity to work in various editor styles.
			border-color: $dark-opacity-light-800;
			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

			.is-dark-theme & {
				border-color: $light-opacity-light-800;
				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
			}

			// Switch to outset borders on larger screens.
			@include break-small() {
				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

				.is-dark-theme & {
					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
				}
			}
		}
	}

	// Hover style.
	&.is-hovered > .block-editor-block-list__block-edit::before {
		box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500;

		.is-dark-theme & {
			box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400;
		}
	}

	// Spotlight mode.
	&.is-focus-mode:not(.is-multi-selected) {
		opacity: 0.5;
		transition: opacity 0.1s linear;

		&:not(.is-focused) .block-editor-block-list__block,
		&.is-focused {
			opacity: 1;
		}
	}
}


/**
 * Cross-block selection
 */

.block-editor-block-list__layout .block-editor-block-list__block {
	::-moz-selection {
		background-color: $blue-medium-highlight;
	}

	::selection {
		background-color: $blue-medium-highlight;
	}

	// Selection style for multiple blocks.
	&.is-multi-selected *::selection {
		background-color: transparent;
	}

	&.is-multi-selected .block-editor-block-list__block-edit::before {
		background: $blue-medium-highlight;

		// Use opacity to work in various editor styles.
		mix-blend-mode: multiply;

		// Collapse extra vertical padding on selection.
		top: -$block-padding;
		bottom: -$block-padding;

		.is-dark-theme & {
			mix-blend-mode: soft-light;
		}
	}
}


/**
 * Block styles and alignments
 */

.block-editor-block-list__layout .block-editor-block-list__block {
	&.has-warning {
		min-height: ( $block-padding + $block-spacing ) * 2;
	}

	// Warnings
	&.has-warning .block-editor-block-list__block-edit {
		// When a block has a warning, you shouldn't be able to manipulate the contents.
		> * {
			pointer-events: none;
			user-select: none;
		}

		// Allow the warning action buttons to be manipulable.
		.block-editor-warning {
			pointer-events: all;
		}
	}

	&.has-warning .block-editor-block-list__block-edit::before {
		// Use opacity to work in various editor styles.
		border-color: $dark-opacity-light-500;
		border-left: $border-width solid $dark-opacity-light-500;

		.is-dark-theme & {
			border-color: $light-opacity-light-600;
		}
	}

	&.has-warning.is-selected .editor-block-list__block-edit::before {
		// Use opacity to work in various editor styles.
		border-color: $dark-opacity-light-800;
		border-left-color: transparent;

		.is-dark-theme & {
			border-color: $light-opacity-light-800;
		}
	}

	&.has-warning .block-editor-block-list__block-edit::after {
		content: "";
		position: absolute;
		background-color: rgba($light-gray-100, 0.4);

		top: -$block-padding;
		bottom: -$block-padding;
		right: -$block-padding;
		left: -$block-padding;
	}

	// Avoid conflict with the multi-selection highlight color.
	&.has-warning.is-multi-selected .block-editor-block-list__block-edit::after {
		background-color: transparent;
	}

	&.has-warning.is-selected .block-editor-block-list__block-edit::after {
		bottom: ( $block-toolbar-height - $block-padding - $border-width );

		@include break-small() {
			bottom: -$block-padding;
		}
	}

	// Appender
	&.is-typing .block-editor-block-list__empty-block-inserter,
	&.is-typing .block-editor-block-list__side-inserter {
		opacity: 0;
		animation: none;
	}

	.block-editor-block-list__empty-block-inserter,
	.block-editor-block-list__side-inserter {
		@include edit-post__fade-in-animation;
	}

	// Reusable blocks
	&.is-reusable > .block-editor-block-list__block-edit::before {
		border: $border-width dashed $dark-opacity-light-500;

		.is-dark-theme & {
			border-color: $light-opacity-light-600;
		}
	}

	&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
		// Use opacity to work in various editor styles.
		border-color: $dark-opacity-light-800;
		border-left-color: transparent;

		.is-dark-theme & {
			border-color: $light-opacity-light-800;
			border-left-color: transparent;
		}
	}

	// Alignments
	&[data-align="left"],
	&[data-align="right"] {
		// Without z-index, won't be clickable as "above" adjacent content.
		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
		width: 100%;

		// When images are floated, the block itself should collapse to zero height.
		height: 0;

		// Hide block border when an image is floated.
		.block-editor-block-list__block-edit {
			&::before {
				content: none;
			}

			// This margin won't collapse on its own, so zero it out.
			margin-top: 0;
		}

		// Keep a 1px margin to compensate for the border/outline.
		.block-editor-block-contextual-toolbar {
			margin-bottom: $border-width;
		}

		// Position toolbar better on mobile.
		.block-editor-block-contextual-toolbar {
			width: auto;
			border-bottom: $border-width solid $light-gray-800;
			bottom: auto;
		}
	}

	// Unlike most explicit left/right alignments, this one should be flipped by the auto-RTL system.
	&[data-align="left"] .block-editor-block-contextual-toolbar {
		left: 0;
		right: auto;
	}

	&[data-align="right"] .block-editor-block-contextual-toolbar {
		left: auto;
		right: 0;
	}

	// Position the sticky toolbar correctly beyond the mobile breakpoint.
	@include break-small() {
		&[data-align="right"] .block-editor-block-contextual-toolbar,
		&[data-align="left"] .block-editor-block-contextual-toolbar {
			top: $block-padding;
		}
	}

	// Left
	&[data-align="left"] {
		// This is in the editor only; the image should be floated on the frontend.
		.block-editor-block-list__block-edit {
			/*!rtl:begin:ignore*/
			float: left;
			margin-right: 2em;
			/*!rtl:end:ignore*/
		}

		// Align block toolbar to floated content.
		@include break-small() {
			.block-editor-block-toolbar {
				/*!rtl:begin:ignore*/
				left: $block-padding;
				right: auto;
				/*!rtl:end:ignore*/
			}
		}
	}

	// Right
	&[data-align="right"] {
		// Right: This is in the editor only; the image should be floated on the frontend.
		> .block-editor-block-list__block-edit {
			/*!rtl:begin:ignore*/
			float: right;
			margin-left: 2em;
			/*!rtl:end:ignore*/
		}

		// Align block toolbar to floated content.
		@include break-small() {
			.block-editor-block-toolbar {
				/*!rtl:begin:ignore*/
				right: $block-padding;
				left: auto;
				/*!rtl:end:ignore*/
			}
		}
	}

	// Wide and full-wide
	&[data-align="full"],
	&[data-align="wide"] {
		clear: both;

		// Without z-index, the block toolbar will be below an adjecent float
		z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}");

		// Mover and settings above
		&.is-multi-selected > .block-editor-block-mover,
		> .block-editor-block-list__block-edit > .block-editor-block-mover {
			// This moves the menu up by the height of the button + border + padding.
			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
			bottom: auto;
			min-height: 0;
			height: auto;
			width: auto;

			&::before {
				content: none;
			}
		}

		&.is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
		> .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control {
			float: left;
		}

		// Hide mover until wide breakpoints, or it might be covered by toolbar
		&.is-multi-selected > .block-editor-block-mover,
		> .block-editor-block-list__block-edit > .block-editor-block-mover {
			display: none;
		}

		@include break-wide() {
			&.is-multi-selected > .block-editor-block-mover,
			> .block-editor-block-list__block-edit > .block-editor-block-mover {
				display: block;
			}
		}

		// Beyond the mobile breakpoint, wide images stretch outside of the column.
		// To center the toolbar, we make it inline-flex so the toolbar is not full-wide.
		@include break-small () {
			.block-editor-block-toolbar {
				display: inline-flex;
			}
		}

		// If the block movers are visible, push the breadcrumb down to make room for them.
		.block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb {
			top: (-$block-padding - $block-left-border-width - ($grid-size-small / 2));
		}
	}

	// Wide
	&[data-align="wide"] {
		// Position mover
		&.is-multi-selected > .block-editor-block-mover,
		> .block-editor-block-list__block-edit > .block-editor-block-mover {
			left: -$block-padding + $border-width;
		}
	}

	// Full-wide
	&[data-align="full"] {
		// Position hover label on the left for the top level block.
		> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
			left: 0;
		}

		// Compensate for main container padding and subtract border.
		@include break-small() {
			margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
			margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
		}

		> .block-editor-block-list__block-edit {
			margin-left: -$block-padding;
			margin-right: -$block-padding;

			@include break-small() {
				margin-left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
				margin-right: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
			}

			// This explicitly sets the width of the block, to override
			// `width: fit-content` from the image block.
			figure {
				width: 100%;
			}
		}

		> .block-editor-block-list__block-edit::before {
			left: 0;
			right: 0;
			border-left-width: 0;
			border-right-width: 0;
		}

		// Position mover
		&.is-multi-selected > .block-editor-block-mover,
		> .block-editor-block-list__block-edit > .block-editor-block-mover {
			left: $border-width;
		}
	}

	// Clear floats
	&[data-clear="true"] {
		float: none;
	}

	// Dropzones
	.block-editor-block-drop-zone {
		top: -4px;
		bottom: -3px;
		margin: 0 $block-padding;
	}

	// Hide appender shortcuts in nested blocks
	// This essentially duplicates the mobile styles for the appender component
	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
	.block-editor-block-list__layout {
		.block-editor-inserter-with-shortcuts {
			display: none;
		}

		.block-editor-block-list__empty-block-inserter,
		.block-editor-default-block-appender .block-editor-inserter {
			left: auto;
			right: $grid-size;
		}
	}
}


/**
 * Left and right side UI; Unified toolbar on Mobile
 */

.block-editor-block-list__block {

	// Left and right block settings and mover.
	&.is-multi-selected > .block-editor-block-mover,
	> .block-editor-block-list__block-edit > .block-editor-block-mover {
		position: absolute;
		width: $block-side-ui-width + $block-side-ui-clearance;

		// Stretch to fill half of the available space to increase hoverable area.
		height: 100%;
		max-height: $block-side-ui-width * 4;
	}

	// Position depending on whether selected or not.
	&.is-multi-selected > .block-editor-block-mover,
	> .block-editor-block-list__block-edit > .block-editor-block-mover {
		top: -$block-padding - $border-width;
	}

	// Elevate when block is selected or hovered.
	@include break-small() {
		&.is-multi-selected,
		&.is-selected,
		&.is-hovered {
			.block-editor-block-mover {
				z-index: z-index(".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover");
			}
		}
	}

	// Left side UI.
	&.is-multi-selected > .block-editor-block-mover,
	> .block-editor-block-list__block-edit > .block-editor-block-mover {
		padding-right: $block-side-ui-clearance;

		// Position for top level blocks.
		left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width;

		// Hide on mobile, as mobile has a separate solution.
		display: none;
		@include break-small() {
			display: block;
		}
	}

	&.is-multi-selected > .block-editor-block-mover {
		left: -$block-side-ui-width - $block-side-ui-clearance;
	}

	// For floats, show block mover when block is selected, and never on hover.
	&[data-align="left"],
	&[data-align="right"] {
		// Show always when the block is selected.
		&.is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
			// Don't show on mobile, allow the special mobile toolbar to work there.
			display: none;
			@include break-small() {
				display: block;
				opacity: 1;
				animation: none;

				// Make wider and taller to make "safe" hover area bigger.
				// The intent is to make it less likely that you hover float-adjacent
				// blocks that visually appear below the block.
				width: $block-side-ui-width + $block-side-ui-clearance + $block-padding + $border-width;
				height: auto;
				padding-bottom: $block-padding;

				// Unset the negative top margin, or it might overlap the block toolbar.
				margin-top: 0;
			}
		}

		// Don't show on hover, or on the "ghost" when dragging.
		&.is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
		&.is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover {
			display: none;
		}
	}
}


/**
 * Mobile unified toolbar.
 */

.block-editor-block-list__block {

	// Show side UI inline below the block on mobile.
	.block-editor-block-list__block-mobile-toolbar {
		display: flex;
		flex-direction: row;

		// Make room for the height of the block toolbar above.
		transform: translateY($block-padding + $border-width);
		margin-top: $block-toolbar-height;
		margin-right: -$block-padding;
		margin-left: -$block-padding;
		border-top: $border-width solid $light-gray-800;
		height: $block-toolbar-height;

		@include break-small() {
			display: none;
		}

		// Add a white background to prevent the block's left border from showing through.
		background-color: $white;

		// Show a shadow below the selected block to imply separation.
		box-shadow: $shadow-below-only;
		@include break-small() {
			box-shadow: none;
		}

		// Movers, inserter, trash, and ellipsis.
		.block-editor-inserter {
			position: relative;
			left: auto;
			top: auto;
			margin: 0;
		}

		.block-editor-inserter__toggle,
		.block-editor-block-mover__control {
			width: $icon-button-size;
			height: $icon-button-size;
			border-radius: $radius-round-rectangle;
			padding: 3px;
			margin: 0;
			justify-content: center;
			align-items: center;

			.dashicon {
				margin: auto;
			}
		}

		// Movers
		.block-editor-block-mover {
			display: flex;
			margin-right: auto;

			.block-editor-inserter,
			.block-editor-block-mover__control {
				float: left;
			}
		}
	}

	// Reset negative margins on mobile for full-width.
	&[data-align="full"] .block-editor-block-list__block-mobile-toolbar {
		margin-left: 0;
		margin-right: 0;
	}
}


/**
 * In-Canvas Inserter
 */

.block-editor-block-list .block-editor-inserter {
	margin: $grid-size;
	cursor: move; // Fallback for IE/Edge < 14
	cursor: grab;
}

// Insertion point (includes inbetween inserter and insertion indicator)
.block-editor-block-list__insertion-point {
	position: relative;
	z-index: z-index(".block-editor-block-list__insertion-point");
	margin-top: -$block-padding;
}

.block-editor-block-list__insertion-point-indicator {
	position: absolute;
	top: calc(50% - #{ $border-width });
	height: 2px;
	left: 0;
	right: 0;
	background: theme(primary);
}

// This is the clickable plus.
.block-editor-block-list__insertion-point-inserter {
	// Don't show on mobile.
	display: none;
	@include break-mobile() {
		display: flex;
	}

	position: absolute;
	bottom: auto;
	left: 0;
	right: 0;
	justify-content: center;
	height: $block-padding + 8px;

	// Show a clickable plus.
	.block-editor-inserter__toggle {
		margin-top: -8px;
		border-radius: 50%;
		color: $blue-medium-focus;
		background: $white;
		height: $block-padding * 2 + 8px;
		width: $block-padding * 2 + 8px;

		&:not(:disabled):not([aria-disabled="true"]):hover {
			box-shadow: none;
		}
	}

	// Hide both the button until hovered.
	opacity: 0;
	transition: opacity 0.1s linear;

	&:hover,
	&.is-visible {
		opacity: 1;
	}
}

// Don't show the sibling inserter before the selected block.
.edit-post-layout:not(.has-fixed-toolbar) {
	// The child selector is necessary for this to work properly in nested contexts.
	.is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter,
	.is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter {
		opacity: 0;
		pointer-events: none;

		&:hover,
		&.is-visible {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

// This is the edge-to-edge hover area that contains the plus.
.block-editor-block-list__block {
	> .block-editor-block-list__insertion-point {
		position: absolute;
		top: -$block-padding - $block-spacing / 2;

		// Matches the whole empty space between two blocks.
		height: $block-padding * 2;
		bottom: auto;

		// Go edge to edge on mobile.
		left: 0;
		right: 0;

		// Beyond mobile, make sure the toolbar overlaps the hover style.
		@include break-small() {
			left: -$border-width;
			right: -$border-width;
		}
	}

	&[data-align="full"] > .block-editor-block-list__insertion-point {
		left: 0;
		right: 0;
	}
}

.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
	display: block;
	margin: 0;
	width: 100%;
	border: none;
	outline: none;
	box-shadow: none;
	resize: none;
	overflow: hidden;
	font-family: $editor-html-font;
	font-size: $text-editor-font-size;
	line-height: 150%;
	transition: padding 0.2s linear;

	&:focus {
		box-shadow: none;
	}
}


/**
 * Block Toolbar when contextual.
 */

.block-editor-block-list__block {
	.block-editor-block-contextual-toolbar {
		z-index: z-index(".block-editor-block-contextual-toolbar");
		white-space: nowrap;
		text-align: left;
		pointer-events: none;

		// Position toolbar below the block on mobile.
		position: absolute;
		bottom: $block-toolbar-height - $block-padding - $border-width;
		left: -$block-padding;
		right: -$block-padding;

		// Paint the borders on the toolbar itself on mobile.
		border-top: $border-width solid $light-gray-800;
		.components-toolbar {
			border-top: none;
			border-bottom: none;
		}

		@include break-small() {
			border-top: none;
			.components-toolbar {
				border-top: $border-width solid $light-gray-800;
				border-bottom: $border-width solid $light-gray-800;
			}
		}
	}

	// Floated items have special needs for the contextual toolbar position + the thicker left border.
	&[data-align="left"] .block-editor-block-contextual-toolbar,
	&[data-align="right"] .block-editor-block-contextual-toolbar {
		margin-bottom: $border-width;
		margin-top: -$block-toolbar-height;

		// Display the box-shadow on the parent element.
		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
		.is-dark-theme & {
			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
		}

		@include break-small() {
			box-shadow: none;
		}

		.editor-block-toolbar {
			border-left: none;
		}
	}

	// Make block toolbar full width on mobile.
	.block-editor-block-contextual-toolbar {
		margin-left: 0;
		margin-right: 0;
		@include break-small() {
			margin-left: -$block-padding - $border-width;
			margin-right: -$block-padding - $border-width;
		}
	}

	// For floats, compensate for this so content doesn't grow smaller.
	&[data-align="left"] .block-editor-block-contextual-toolbar {
		/*rtl:ignore*/
		margin-right: $block-padding + $border-width;
	}

	&[data-align="right"] .block-editor-block-contextual-toolbar {
		/*rtl:ignore*/
		margin-left: $block-padding + $border-width;
	}

	// Reset pointer-events on children.
	.block-editor-block-contextual-toolbar > * {
		pointer-events: auto;
	}

	// Full-aligned blocks have negative margins on the parent of the toolbar, so additional position adjustment is not required.
	&[data-align="full"] .block-editor-block-contextual-toolbar {
		left: 0;
		right: 0;
	}
}

// Enable toolbar footprint collapsing
.block-editor-block-contextual-toolbar {
	// Position the contextual toolbar above the block.
	.block-editor-block-list__block & {
		@include break-small() {
			bottom: auto;
			left: auto;
			right: auto;
			box-shadow: none;

			// Move the block toolbar out of the flow using translate.
			transform: translateY(-$block-toolbar-height -$block-padding -$border-width);

			// IE11 does not support `position: sticky`.
			@supports (position: sticky) {
				position: sticky;

				// Compensate for translate, so the sticky sticks to the top.
				top: $block-toolbar-height + $block-padding;
			}
		}
	}

	.block-editor-block-list__block[data-align="left"] & {
		// RTL note: this rule should not be auto-flipped based on direction.
		/*rtl:ignore*/
		float: left;
	}

	.block-editor-block-list__block[data-align="right"] & {
		// RTL note: this rule should not be auto-flipped based on direction.
		/*rtl:ignore*/
		float: right;
	}

	.block-editor-block-list__block[data-align="left"] &,
	.block-editor-block-list__block[data-align="right"] & {
		// Move the block toolbar out of the flow using translate, but less for floats.
		transform: translateY(-$block-padding -$border-width);
	}
}

// Position the block toolbar when contextual.
.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
	width: 100%;

	@include break-small() {
		width: auto;

		// Hide right border on desktop, where the .components-toolbar instead has a right border.
		border-right: none;

		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
		position: absolute;
		left: $border-width;
		top: $border-width;
	}
}


/**
 * Hover label
 */

.block-editor-block-list__breadcrumb {
	position: absolute;
	line-height: 1;
	z-index: z-index(".block-editor-block-list__breadcrumb");

	// Position in the top left of the border.
	left: -$block-padding - $block-left-border-width;
	top: (($block-padding * -2) - $block-left-border-width);

	.components-toolbar {
		border: none;
		line-height: 1;
		font-family: $default-font;
		font-size: 11px;
		padding: 4px 4px;
		background: $light-gray-500;
		color: $dark-gray-900;

		.is-dark-theme & {
			background: $dark-gray-600;
			color: $white;
		}

		// Animate in
		.block-editor-block-list__block:hover & {
			opacity: 0;
			@include edit-post__fade-in-animation(60ms, 0.5s);
		}
	}

	// Position this above the toolbar of parent blocks.
	.editor-inner-blocks & {
		z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
	}

	// Remove negative left breadcrumb position for left aligned blocks.
	[data-align="left"] & {
		left: 0;
	}

	// Right-align the breadcrumb for right-aligned blocks.
	[data-align="right"] & {
		left: auto;
		right: 0;
	}
}

.block-editor-block-list__descendant-arrow::before {
	content: "→";
	display: inline-block;
	padding: 0 4px;

	.rtl & {
		content: "←";
	}
}

.block-editor-block-list__block {
	@include break-small {
		// Increase the hover and selection area around blocks.
		// This makes the blue hover line and the settings button appear even if
		// the mouse cursor is technically outside the block.
		// This improves usability by making it possible to click somewhat outside
		// the block and select it. (eg. A fuzzy click target.)
		&::before {
			bottom: 0;
			content: "";
			left: -$block-padding * 2;
			position: absolute;
			right: -$block-padding * 2;
			top: 0;
		}

		// Remove the fuzzy click area effect set above on nested blocks.
		// It should only applies to top-level blocks; applying this rule to
		// nested blocks will result in difficult-to-use and possibly overlapping
		// click targets.
		& &::before {
			left: 0;
			right: 0;
		}

		// Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
		&[data-align="full"]::before {
			content: none;
		}
	}
}

.block-editor-block-list__block .block-editor-warning {
	z-index: z-index(".block-editor-warning");
	position: relative;
	margin-right: -$block-padding;
	margin-left: -$block-padding;

	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
	margin-bottom: -$block-padding;
	transform: translateY(-$block-padding);

	// Bigger padding on mobile where blocks are edge to edge.
	padding: 10px $block-padding;
	@include break-small() {
		padding: 10px $block-padding;
	}
}