style.scss

$header-toolbar-min-width: 335px;

.edit-site-header-edit-mode {
	height: $header-height;
	align-items: center;
	background-color: $white;
	color: $gray-900;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	justify-content: space-between;
	border-bottom: $border-width solid $gray-200;
	padding-left: $header-height;

	.edit-site-header-edit-mode__start {
		display: flex;
		border: none;
		align-items: center;
		flex-shrink: 2;
		// We need this to be overflow hidden so the block toolbar can
		// overflow scroll. If the overflow is visible, flexbox allows
		// the toolbar to grow outside of the allowed container space.
		overflow: hidden;
		// Take up the full height of the header so the border focus
		// is visible on toolbar buttons.
		height: 100%;
		// Allow focus ring to be fully visible on furthest right button.
		@include break-medium() {
			padding-right: 2px;
		}
	}

	.edit-site-header-edit-mode__end {
		display: flex;
		justify-content: flex-end;
	}

	.edit-site-header-edit-mode__center {
		display: flex;
		align-items: center;
		height: 100%;
		flex-grow: 1;
		margin: 0 $grid-unit-20;
		justify-content: center;
		// Flex items will, by default, refuse to shrink below a minimum
		// intrinsic width. In order to shrink this flexbox item, and
		// subsequently truncate child text, we set an explicit min-width.
		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
		min-width: 0;
	}

}

.edit-site-header-edit-mode__toolbar {
	display: flex;
	align-items: center;
	padding-left: $grid-unit-20;
	gap: $grid-unit-10;

	@include break-medium() {
		padding-left: $grid-unit-50 * 0.5;
	}

	@include break-wide() {
		padding-right: $grid-unit-10;
	}

	.edit-site-header-edit-mode__inserter-toggle {
		svg {
			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
			@include reduce-motion("transition");
		}

		&.is-pressed {
			svg {
				transform: rotate(45deg);
			}
		}
	}
}

/**
 * Buttons on the right side
 */

.edit-site-header-edit-mode__actions {
	display: inline-flex;
	align-items: center;
	padding-right: $grid-unit-10;
	gap: $grid-unit-10;
}

.edit-site-header-edit-mode__preview-options {
	opacity: 1;
	transition: opacity 0.3s;

	&.is-zoomed-out {
		opacity: 0;
	}
}

.edit-site-header-edit-mode__document-tools {
	display: flex;
	border: none;

	// The Toolbar component adds different styles to buttons, so we reset them
	// here to the original button styles
	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
		// This is best fixed by making the mover control area a proper single toolbar group.
		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
		height: $button-size-compact;
		min-width: $button-size-compact;
		padding: 4px;

		&.is-pressed {
			background: $gray-900;
		}

		&:focus:not(:disabled) {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
			outline: $border-width solid transparent;
		}

		&::before {
			display: none;
		}
	}

	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
		// Special dimensions for this button.
		min-width: $button-size-compact;
		width: $button-size-compact;
		height: $button-size-compact;
		padding: 0;
	}

	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
		width: auto;
		padding: 0 $grid-unit-10;
	}
}

// Button text label styles

.edit-site-header-edit-mode.show-icon-labels {
	.components-button.has-icon {
		width: auto;

		// Hide the button icons when labels are set to display...
		svg {
			display: none;
		}
		// ... and display labels.
		&::after {
			content: attr(aria-label);
		}
		&[aria-disabled="true"] {
			background-color: transparent;
		}
	}
	.is-tertiary {
		&:active {
			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
			background-color: transparent;
		}
	}
	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
	.edit-site-save-button__button {
		padding-left: 6px;
		padding-right: 6px;
	}

	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
		&::after {
			content: none;
		}
	}

	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
		height: 36px;
		padding: 0 $grid-unit-10;
	}

	.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
		margin-left: $grid-unit-10;
	}

	.block-editor-block-mover {
		border-left: none;

		&::before {
			content: "";
			width: $border-width;
			margin-top: $grid-unit + $grid-unit-05;
			margin-bottom: $grid-unit + $grid-unit-05;
			background-color: $gray-300;
			margin-left: $grid-unit;
		}
	}
}

.has-fixed-toolbar {
	.selected-block-tools-wrapper {
		overflow-x: scroll;

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

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

			&::after {
				content: "";
				width: $border-width;
				margin-top: $grid-unit + $grid-unit-05;
				margin-bottom: $grid-unit + $grid-unit-05;
				background-color: $gray-300;
				margin-left: $grid-unit;
			}

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

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

	.edit-site-header-edit-mode__center.is-collapsed {
		display: none;
	}
}

.edit-site-header-edit-mode__block-tools-toggle {
	margin-left: 2px; // Allow focus ring to be fully visible
}