From c5bed279b7b16f9742f1c2ab45e46dc9eadca77d Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Wed, 8 Nov 2023 15:15:28 +0100
Subject: [PATCH] Add focus styles for template card

[MAILPOET-4676]
---
 mailpoet/assets/css/src/mailpoet-templates.scss | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/mailpoet/assets/css/src/mailpoet-templates.scss b/mailpoet/assets/css/src/mailpoet-templates.scss
index cd047e700a..4456bd5526 100644
--- a/mailpoet/assets/css/src/mailpoet-templates.scss
+++ b/mailpoet/assets/css/src/mailpoet-templates.scss
@@ -37,16 +37,21 @@
     grid-template-rows: auto 1fr;
   }
 
-  &:hover {
-    background: #fff;
+  &:hover,
+  &:focus {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
     color: inherit;
   }
 
-  &:focus {
-    border-color: #2271b1;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-    color: inherit;
+  // add focus ring in :after pseudo-element to cover badge edge
+  &:focus:after {
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    outline: var(--wp-admin-border-width-focus) solid
+      var(--wp-admin-theme-color);
+    pointer-events: none;
+    position: absolute;
   }
 }