Fix #4676: Series pool shown as blue unless hovered.

Broken in 49bc2364 by the use of @extend.

Here's what happened. There are two CSS rules that both apply to pool links:

* a:link { color: var(--link-color); }
* .pool-category-series a { color: var(--series-pool-color); }

These rules have equal specificity (0-1-1). This means the rule that is
defined last takes priority. This means the order in which CSS files are
included matters. 49bc2364 used the @extend directive in a rule for
popup menus, which required an @import, which changed the order of the
CSS files, which made the a:link rule suddenly take priority over the
series pool rule.

The proper fix would be to use Sass's new @use directive instead of
@import, but that requires the latest version of Sass, which requires
the latest version of Webpacker, which we can't upgrade to yet because
of breaking changes.

The real moral of the story is: our CSS is very fragile because of
specificity rules. It's very important that rules are defined in a
certain order, otherwise our CSS will break.

* https://sass-lang.com/documentation/at-rules/use
* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

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;
     }
   }
 

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);
+  }
+}

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"] {