Converting from sass to nested vanilla css with layers (#147)

assets/css/base/_links.css

@@ -0,0 +1,81 @@
+/* Links
+
+Hyperlinks are used to allow the user to navigate to other resources or to
+download a resource.
+
+The order of link states are based on Eric Meyer's article:
+http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+
+:visited - A link that has already been visited.
+:hover   - A link that is being hovered over.
+:focus   - A link that has been given keyboard focus.
+:active  - A link that is being actively clicked. */
+
+@layer base {
+  a {
+    color: var(--color-link);
+  }
+
+  /* Any element can receive focus, but only links can be visited, so we can
+  safely lower this selector's specificity. This also ensures visited links
+  with additional styles won't have their styles overridden. */
+  :visited {
+    color: var(--color-link-visited);
+  }
+
+  a:hover,
+  a:focus {
+    color: var(--color-link-hover);
+  }
+
+  a:active {
+    color: var(--color-link-active);
+  }
+
+  /* Remove underline from links to current page to */
+  /* indicate that there is no need to click on it. */
+  [aria-current] {
+    text-decoration: none;
+  }
+
+  /* Use smooth scrolling unless user prefer less motion. */
+  @media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+      scroll-behavior: smooth;
+      scroll-padding-block-start: var(--gutters);
+    }
+  }
+
+  .link-nav {
+    a {
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* Inverted links, for dark backgrounds. */
+  .link-inverted {
+    a {
+      &:link {
+        color: var(--color-link-inverted);
+      }
+
+      &:visited {
+        color: var(--color-link-visited-inverted);
+      }
+
+      &:hover,
+      &:focus {
+        color: var(--color-link-hover-inverted);
+      }
+
+      &:active {
+        color: var(--color-link-active-inverted);
+      }
+    }
+  }
+}