Align block hover and select styles across list view, site editor, se…

…lect mode (#31277)

* Align block hover styles across list view, site editor, select mode

* Undo the inversion

* Outline width for selected + focussed blocks

packages/block-editor/src/components/block-list/style.scss

@@ -62,10 +62,14 @@
 	}
 
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
-		box-shadow: 0 0 0 1px $gray-600;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+
+	.block-editor-block-list__block.is-highlighted::after {
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		outline: $border-width solid transparent;
 	}
 
-	.block-editor-block-list__block.is-highlighted::after,
 	.block-editor-block-list__block.is-multi-selected::after,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
@@ -275,7 +279,7 @@
 		cursor: unset;
 
 		&::after {
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); // Selected not focussed.
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
 			top: $border-width;
 			left: $border-width;
 			right: $border-width;