Add focus to header

1 files changed, 8 insertions, 8 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index eb5438d..90ed827 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -40,19 +40,19 @@
             color:            prop(--colors --fg);
             background-color: prop(--colors --bg);
             text-decoration:  none;
-            transition:       background-color .2s, color .2s;
-
-            &:hover {
-                color:            prop(--colors --hover --fg);
-                background-color: prop(--colors --hover --bg);
-            }
+            transition:       background-color .2s, color .2s, border-left-color .2s;
 
             @include next-twin-element {
-                //padding-left: calc(0.5 * #{prop(--dims --pad-x)});
-                //margin-left: calc(-0.5 * #{prop(--dims --pad-x)});
                 border-left: 1px solid prop(--colors --border);
             }
 
+            &:hover,
+            &:focus {
+                color:             prop(--colors --hover --fg);
+                background-color:  prop(--colors --hover --bg);
+                border-left-color: prop(--colors --hover --bg);
+            }
+
             @include modifier('icon') {
                 display:         flex;
                 align-items:     center;