diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index f13b2e8c16..e1d5a7ceb8 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -15,8 +15,8 @@
     }
 
     &:focus-visible {
-        outline: none;
-        box-shadow: var(--shadow-depth-8-focused);
+        outline: var(--outline-focus-visible);
+        outline-offset: 0.03125rem; // 0.5px
     }
 }
 
@@ -602,7 +602,9 @@ $clickable-normal-state-transitions: (
     }
 
     &:focus-visible {
-        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+        // box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+        outline: var(--outline-focus-visible);
+        outline-offset: var(--outline-focus-visible-offset);
     }
 
     &:focus-visible:active {
diff --git a/src/style/shadows.scss b/src/style/shadows.scss
index 33ddbdee32..7641c98780 100644
--- a/src/style/shadows.scss
+++ b/src/style/shadows.scss
@@ -6,10 +6,14 @@
         0 0.125rem 0.26rem rgb(var(--color-white), 0.06),
         0 0 0 1px rgb(var(--color-white), 0.06);
 
+    --outline-focus-visible: 0.125rem solid
+        color-mix(in srgb, var(--mdc-theme-primary) 60%, transparent);
+    --outline-focus-visible-offset: 0.0125rem;
+
     // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
     --shadow-focused-state: 0 0 0 0.125rem
-        var(--lime-primary-color, var(--limel-theme-primary-color));
+        var(--lime-primary-color, var(--limel-theme-primary-color)) inset;
 
     // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.