Refactor CSS to BEM

Update dependencies
Improve focus and hover states

css/metadata.css

@@ -1,48 +1,92 @@
-/** @define Metadata */
-
-.Metadata {
-  border-bottom: 1px solid var(--colorLightGrey);
+.metadata {
+  border-bottom: 1px solid var(--color-light-grey);
   font-size: 14px;
-  margin-bottom: var(--spaceMd);
+  margin-bottom: var(--space-md);
 }
 
-@media (--viewportLg) {
-  .Metadata {
+@media (--viewport-lg) {
+  .metadata {
     border-bottom: none;
   }
 
-  .Metadata.is-locked {
+  .metadata.is-locked {
     position: fixed;
   }
 }
 
-.Metadata-date {
-  color: var(--colorGrey);
+.metadata__date {
+  color: var(--color-grey);
   display: none;
-  margin-bottom: var(--spaceSm);
+  margin-bottom: var(--space-sm);
 }
 
-@media (--viewportLg) {
-  .Metadata-date {
+@media (--viewport-lg) {
+  .metadata__date {
     display: block;
   }
 }
 
-.Metadata-comments,
-.Metadata-categories,
-.Metadata-share {
-  margin-bottom: var(--spaceSm);
+.metadata__comments,
+.metadata__categories,
+.metadata__share {
+  margin-bottom: var(--space-sm);
 }
 
-.Metadata-commentsText,
-.Metadata-categoriesText,
-.Metadata-dateText {
+.metadata__comments-text,
+.metadata__categories-text,
+.metadata__date-text {
   line-height: 2.3;
   margin-left: 10px;
   text-transform: capitalize;
   vertical-align: top;
 }
 
-.Metadata-shareLink {
-  margin-right: var(--spaceSm);
+.metadata__share-link {
+  display: inline-block;
+  margin-right: var(--space-sm);
+  transition:
+    filter var(--transition-md) ease-out,
+    transform var(--transition-md) ease-out;
+}
+
+.metadata__share-link:focus,
+.metadata__share-link:hover {
+  filter: saturate(1.5) contrast(1.5);
+  transform: scale(1.2);
+}
+
+/**
+ * Link styles
+ */
+
+.metadata__comments-text,
+.metadata__categories-link {
+  position: relative;
+}
+
+.metadata__comments-text:after,
+.metadata__categories-link:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-md) ease-out;
+}
+
+.metadata__comments-link:focus,
+.metadata__comments-link:hover,
+.metadata__categories-link:focus,
+.metadata__categories-link:hover {
+  color: var(--color-light-blue);
+}
+
+.metadata__comments-link:focus .metadata__comments-text:after,
+.metadata__comments-link:hover .metadata__comments-text:after,
+.metadata__categories-link:focus:after,
+.metadata__categories-link:hover:after {
+  opacity: 1;
 }