Add missing focus style to start template options previews. (#49334)

* Add missing focus style to start template options previews.

* Simplify CSS.

* Better fix to preserve the border radius.

packages/edit-site/src/components/start-template-options/style.scss

@@ -19,6 +19,7 @@
 	margin-top: $grid-unit-05;
 	gap: $grid-unit-30;
 	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
+
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 		margin-bottom: 0;
@@ -27,7 +28,6 @@
 
 		.block-editor-block-preview__container {
 			height: 100%;
-			box-shadow: 0 0 0 1px $gray-300;
 		}
 
 		.block-editor-block-preview__content {
@@ -38,20 +38,13 @@
 		.block-editor-block-patterns-list__item-title {
 			display: none;
 		}
+	}
 
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-			}
-		}
-
-		&:focus {
-			.block-editor-block-preview__container {
-				box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 2px solid transparent;
-			}
+	.block-editor-block-patterns-list__item {
+		// Avoid to override the BlockPatternList component
+		// default hover and focus styles.
+		&:not(:focus):not(:hover) .block-editor-block-preview__container {
+			box-shadow: 0 0 0 1px $gray-300;
 		}
 	}