diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss
index 6dce7d5fd..d4d9efc70 100644
--- a/app/components/popup_menu_component/popup_menu_component.scss
+++ b/app/components/popup_menu_component/popup_menu_component.scss
@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/030_links.scss";
+@import "../../javascript/src/styles/base/000_vars.scss";
 
 div.popup-menu {
   display: inline-block;
@@ -14,12 +14,12 @@ div.popup-menu {
 
     // the popup menu is open
     &[aria-expanded="true"] {
-      @extend .active-link;
+      @include active-link;
     }
 
     // the popup menu is not open
     &:not([aria-expanded="true"]) {
-      @extend .inactive-link;
+      @include inactive-link;
     }
   }
 
diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index 26b84d025..39da44ec0 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -50,3 +50,21 @@ $h4_padding: 0.8em 0 0.25em 0;
   font-weight: 900;
   content: $content;
 }
+
+@mixin active-link {
+  color: var(--link-color);
+
+  &:hover, &:focus {
+    background-color: var(--subnav-menu-background-color);
+    outline: none;
+  }
+}
+
+@mixin inactive-link {
+  color: var(--muted-text-color);
+
+  &:hover {
+    color: var(--link-hover-color);
+    background-color: var(--subnav-menu-background-color);
+  }
+}
diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss
index faa94c2a0..19cb74a15 100644
--- a/app/javascript/src/styles/base/030_links.scss
+++ b/app/javascript/src/styles/base/030_links.scss
@@ -1,3 +1,5 @@
+@import "../../javascript/src/styles/base/000_vars.scss";
+
 a:link {
   color: var(--link-color);
   text-decoration: none;
@@ -23,20 +25,11 @@ a.active {
 }
 
 a.active-link {
-  color: var(--link-color);
-
-  &:hover {
-    background-color: var(--subnav-menu-background-color);
-  }
+  @include active-link;
 }
 
 a.inactive-link {
-  color: var(--muted-text-color);
-
-  &:hover {
-    color: var(--link-hover-color);
-    background-color: var(--subnav-menu-background-color);
-  }
+  @include inactive-link;
 }
 
 a[rel*="external"] {