.edit-post-header {
	height: $header-height;
	padding: $item-spacing 2px;
	border-bottom: 1px 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;

	// mobile edgecase for toolbar
	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, causing (ノಠ益ಠ)ノ彡┻━┻
	@include break-small {
		position: fixed;
		padding: $item-spacing;
		top: $admin-bar-height-big;
	}

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

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

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

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

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

.edit-post-header .components-button {
	border-radius: $button-style__radius-roundrect;

	// header toggle buttons
	&.is-toggled {
		color: $white;
	}

	// put the gray background on a separate layer, so as to match the size of the publish button (34px)
	&.is-toggled:before {
		content: "";
		border-radius: $button-style__radius-roundrect;
		position: absolute;
		z-index: -1;
		background: $dark-gray-500;
		top: 1px;
		right: 1px;
		bottom: 1px;
		left: 1px;
	}

	&.is-toggled:hover,
	&.is-toggled:focus {
		box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white;
		color: $white;
		background: $dark-gray-500;
	}

	&.editor-post-switch-to-draft,
	&.editor-post-preview,
	&.editor-post-publish-button,
	&.editor-post-publish-panel__toggle {
		margin: 2px;
		height: 33px;
		line-height: 32px;
		padding: 0 5px 2px;
		font-size: $default-font-size;

		@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;
		}
	}
}
