style.scss

.editor-collapsible-block-toolbar {
	overflow: hidden;
	display: flex;
	align-items: center;
	height: $header-height;

	.block-editor-block-contextual-toolbar {
		border-bottom: 0;
		height: 100%;
	}

	// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
	.block-editor-block-toolbar {
		height: 100%;
		// Push down so that buttons are centered vertically.
		// It should be 14px (60px header height - 32px compact button height = 28 / 2),
		// but there is a -1px top-margin down the stack that affects this.
		padding-top: math.div($header-height - $button-size-compact, 2) + 1;

		// Match the height of other buttons in the header toolbar.
		.components-button:not(.block-editor-block-mover-button) {
			height: $button-size-compact;
		}
	}

	&::after {
		content: "";
		width: $border-width;
		height: $grid-unit-30;
		background-color: $gray-300;
		margin-right: $grid-unit - $border-width;
	}

	// Modified group borders.
	.components-toolbar-group,
	.components-toolbar {
		border-right: none;
		position: relative;

		&::after {
			content: "";
			width: $border-width;
			height: $grid-unit-30;
			background-color: $gray-300;
			top: $grid-unit-05;
			position: absolute;
			right: -$border-width;
		}

		& .components-toolbar-group.components-toolbar-group {
			&::after {
				display: none;
			}
		}
	}

	.block-editor-block-mover {
		// Match the height of other buttons in the header toolbar.
		&.is-horizontal .block-editor-block-mover-button {
			height: $button-size-compact;
			overflow: visible;
		}

		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
		@include break-small() {
			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
				position: relative;
				top: -10px;
			}
		}
	}

	&.is-collapsed {
		display: none;
	}
}

.editor-collapsible-block-toolbar__toggle {
	margin-left: 2px; // Allow focus ring to be fully visible
}