.edit-post-header {
	height: $header-height;
	padding: $grid-size-small 2px;
	border-bottom: $border-width solid $light-gray-500;
	background: $white;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	z-index: z-index(".edit-post-header");
	left: 0;
	right: 0;

	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
	top: 0;
	position: sticky;

	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
	@include break-small {
		position: fixed;
		padding: $grid-size;
		top: $admin-bar-height-big;
	}

	@include break-medium() {
		top: $admin-bar-height;

		body.is-fullscreen-mode & {
			top: 0;
		}
	}

	.editor-post-switch-to-draft + .editor-post-preview {
		display: none;

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

	// Some browsers, most notably IE11, honor an older version of the flexbox spec
	// which takes absolutely positioned items into account when calculating `space-between`.
	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
	//
	// This difference is causing our header layout to break when focused in IE11.
	// Our focused region styles use an absolutely positioned :after pseudo element to draw an outline,
	// and IE11 is adding space between it and our last real child, shifting righthand UI elements
	// to the left. For a workaround, we change the flex order to move the undesired spacing to the middle
	// where it is no longer noticeable.
	> .edit-post-header__settings {
		order: 1;

		// Restore default order for all other browsers
		@supports (position: sticky) {
			order: initial;
		}
	}
}

@include editor-left(".edit-post-header");

.edit-post-header__settings {
	display: inline-flex;
	align-items: center;
}

.edit-post-header .components-button {
	// Header toggle buttons.
	&.is-toggled {
		color: $white;
		background: $dark-gray-500;
		margin: 1px;
		padding: 7px;
	}

	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
	&.is-toggled:hover,
	&.is-toggled:focus {
		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
		color: $white !important;
		background: $dark-gray-500 !important;
	}

	// Make editor header bar buttons bigger to match IconButtons.
	&.editor-post-save-draft,
	&.editor-post-switch-to-draft,
	&.editor-post-preview,
	&.editor-post-publish-button,
	&.editor-post-publish-panel__toggle {
		margin: 2px;
		height: 33px;
		line-height: 32px;
		font-size: $default-font-size;
	}

	&.editor-post-save-draft,
	&.editor-post-switch-to-draft {
		padding: 0 5px;

		@include break-small() {
			padding: 0 12px;
		}
	}

	&.editor-post-preview,
	&.editor-post-publish-button,
	&.editor-post-publish-panel__toggle {
		padding: 0 5px 2px;

		@include break-small() {
			padding: 0 12px 2px;
		}
	}

	@include break-medium() {
		&.editor-post-preview {
			margin: 0 3px 0 12px;
		}

		&.editor-post-publish-button,
		&.editor-post-publish-panel__toggle {
			margin: 0 12px 0 3px;
		}
	}
}