From da321d69b3fa7555090e7db0f9b589a9a4c28b3b Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Mon, 11 Apr 2022 16:01:34 -0300
Subject: [PATCH] feat: add outline

---
 src/components/primitives/link/link.module.scss | 7 ++++++-
 src/css/global.scss                             | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/primitives/link/link.module.scss b/src/components/primitives/link/link.module.scss
index 6ccdc23..19814c0 100644
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@@ -90,7 +90,8 @@
       background: currentcolor;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       .icon {
         transform: rotate(45deg) scale(1.15);
       }
@@ -135,6 +136,10 @@
       }
     }
 
+    &:focus {
+      outline: tovw(2px, 'default', 2px) dashed var(--color-accent);
+    }
+
     @keyframes border {
       from {
         background-position: 0 0, tovw(8px, 'default', 6px) 0,
diff --git a/src/css/global.scss b/src/css/global.scss
index 3d9297c..4d5bd7f 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -88,6 +88,10 @@ body:not(.user-is-tabbing) textarea:focus {
   outline: none;
 }
 
+:focus-visible {
+  outline: tovw(2px, 'default', 2px) dashed var(--color-accent);
+}
+
 ::selection {
   color: var(--color-black);
   background: var(--color-accent);