Added focus style for links

1 files changed, 19 insertions, 0 deletions

diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss
index 71dd9da..d02bc5f 100644
--- a/src/scopes/_invisible-links.scss
+++ b/src/scopes/_invisible-links.scss
@@ -1,15 +1,34 @@
 @use 'iro-sass/src/index' as iro;
 
 @include iro.props-namespace('invisible-links') {
+    @include iro.props-store((
+        --colors: (
+            --key-focus: (
+                --border: fn.global-color(--focus --fill),
+                --shadow: fn.global-color(--focus --shadow),
+            ),
+        )
+    ), 'colors');
+
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
+            margin:          -2px;
+            border:          2px solid transparent;
+            border-radius:   2px;
             color:           currentColor;
             text-decoration: none;
 
             &:hover {
                 text-decoration: underline;
             }
+
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color:  fn.color(--key-focus --border);
+                    box-shadow:    fn.color(--key-focus --shadow);
+                }
+            }
         }
     }
 }