LMS: student notes - styling links to appear in highlighted text

lms/static/sass/base/_base.scss

@@ -103,7 +103,7 @@ a:link, a:visited {
   }
 
   &:disabled, &.is-disabled, &.disabled {
-    pointer-events: none;
+    @extend %ui-disabled;
     opacity: 0.5;
     cursor: not-allowed;
   }

lms/static/sass/course/modules/_student-notes.scss

@@ -215,6 +215,33 @@ $notes-annotator-background-dark: rgba(122,122,122,0.6); // taken from annotator
 // highlight
 .annotator-hl {
   background: $student-notes-highlight-color-focus;
+
+  // CASE: a highlight contains a link
+  a {
+    color: $link-color;
+
+    // STATE: hover/focus
+    &:hover, &:focus {
+      text-decoration: underline;
+    }
+
+    // STATE: disabled
+    &:disabled, &.is-disabled {
+      @extend %ui-disabled;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// CASE: a link contains a highlight
+a .annotator-hl {
+  color: $link-color;
+
+  // STATE: hover/focus
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
 }
 
 // content