Fix regression with formatting toolbar (#7167)

The right-border on the alignments was missing. This PR changes how we paint separators, so it gets fixed.

Verify this paints the right grouping borders for toolbar sections, both on mobile and desktop breakpoints, and with both the top-fixed toolbar and the block-fixed toolbar.

edit-post/components/header/header-toolbar/style.scss

@@ -11,8 +11,10 @@
 	display: inline-flex;
 	align-items: center;
 
-	.editor-block-switcher .components-toolbar {
-		border: none;
+	@include break-large() {
+		.editor-block-switcher .components-toolbar {
+			border-left: 1px solid $light-gray-500;
+		}
 	}
 }
 

editor/components/block-list/style.scss

@@ -803,11 +803,8 @@
 .editor-block-contextual-toolbar .editor-block-toolbar {
 	width: 100%;
 	background: $white;
-
-	// use opacity to work in various editor styles
-	background-clip: padding-box;
-	box-sizing: padding-box;
 	border: 1px solid $light-gray-500;
+	border-right: none;
 
 	// this prevents floats from messing up the position
 	position: absolute;

editor/components/block-switcher/style.scss

@@ -1,9 +1,5 @@
 .editor-block-switcher {
 	position: relative;
-
-	.components-toolbar {
-		border-left: none;
-	}
 }
 
 .editor-block-switcher__toggle {
@@ -12,9 +8,6 @@
 	padding: 8px;
 	border-radius: 0;
 
-	// Add a right border to show as separator in the block toolbar.
-	border-right: 1px solid $light-gray-700;
-
 	&:focus:before {
 		top: -3px;
 		right: -3px;

editor/components/block-toolbar/style.scss

@@ -13,6 +13,9 @@
 
 	.components-toolbar {
 		border: none;
+
+		// Add a right border to show as separator in the block toolbar.
+		border-right: 1px solid $light-gray-500;
 	}
 
 	// this should probably have its own class