.edit-post-header-toolbar {
	display: inline-flex;
	align-items: center;

	// Hide all action buttons except the inserter on mobile.
	> .components-button {
		display: none;

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

	// Hide table of contents and block navigation on mobile.
	.block-editor-block-navigation,
	.table-of-contents {
		display: none;

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

// Block toolbar when fixed to the top of the screen.
.edit-post-header-toolbar__block-toolbar {
	// Stack toolbar below Editor Bar.
	position: absolute;
	top: $header-height;
	left: 0;
	right: 0;
	background: $white;
	min-height: $block-toolbar-height;
	border-bottom: $border-width solid $light-gray-500;

	.block-editor-block-toolbar .components-toolbar {
		border-top: none;
		border-bottom: none;
	}

	.is-sidebar-opened & {
		display: none;
	}

	@include break-medium {
		.is-sidebar-opened & {
			display: block;
			right: $sidebar-width;
		}
	}

	// Move toolbar into top Editor Bar.
	@include break-xlarge {
		padding-left: $grid-size;
		position: static;
		left: auto;
		right: auto;
		background: none;
		border-bottom: none;
		min-height: auto;

		.is-sidebar-opened & {
			right: auto;
		}

		.block-editor-block-toolbar {
			margin: -($grid-size + $border-width) 0;
		}

		.block-editor-block-toolbar .components-toolbar {
			padding: ($grid-size + $border-width + $border-width) $grid-size-small ($grid-size + $border-width);
		}
	}
}