style.scss

.editor-header {
	height: $header-height;
	padding: $item-spacing;
	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( '.editor-header' );
	left: 0;
	right: 0;

	top: $admin-bar-height-big;
	position: fixed;

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

	@include break-large() {
		left: $admin-sidebar-width;

		body.rtl & {
			left: 0;
			right: $admin-sidebar-width;
		}
	}
}

.sticky-menu .editor-header {	/* Sticky is when on smaller breakpoints, nav menu is manually opened */
	@include break-medium() {
		left: $admin-sidebar-width;
	}
}

body.rtl.sticky-menu .editor-header {
	@include break-medium() {
		left: 0;
		right: $admin-sidebar-width;
	}
}

.auto-fold .editor-header {		/* Auto fold is when on smaller breakpoints, nav menu auto colllapses */
	@include break-medium() {
		left: $admin-sidebar-width-collapsed;

		body.rtl & {
			left: 0;
			right: $admin-sidebar-width-collapsed;
		}
	}

	@include break-large() {
		left: $admin-sidebar-width;

		body.rtl & {
			left: 0;
			right: $admin-sidebar-width;
		}
	}
}

/* Sidebar manually collapsed */
.folded .editor-header {
	left: 0;

	body.rtl & {
		right: 0;
	}

	@include break-medium() {
		left: $admin-sidebar-width-collapsed;

		body.rtl & {
			left: 0;
			right: $admin-sidebar-width-collapsed;
		}
	}
}

/* Mobile menu opened */
.auto-fold .wp-responsive-open .editor-header {
	left: $admin-sidebar-width-big;
	right: -$admin-sidebar-width-big;

	body.rtl & {
		left: -$admin-sidebar-width-big;
		right: $admin-sidebar-width-big;
	}
}

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

.editor-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:focus {
		outline: none;
		box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white;
		color: $white;
		background: $dark-gray-500;
	}

	@include break-medium() {
		&.editor-post-publish-button, &.editor-post-publish-with-dropdown__button {
			height: 33px;
			line-height: 32px;
		}
	}
}