Fix Sass deprecation warnings by opting into new behavior

Following a recent Sass update, the CSS build process was producing many
warnings about upcoming Sass changes affecting declarations that appear after
nested rules.  See
https://sass-lang.com/documentation/breaking-changes/mixed-decls/.

One of the approaches suggested on this page to resolve a deprecation is to opt
into the new behavior by wrapping the declarations causing the warning in a
`& { }` block. This is the approach taken in this commit.

h/static/styles/components/_annotation-card.scss

@@ -8,13 +8,16 @@
 
 .annotation-card {
   @include typography.font-normal;
-  border: 1px solid color.$grey-2;
-  list-style: none;
-  padding: 15px;
-  margin-bottom: 10px;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-  background: white;
-  overflow-wrap: break-word;
+
+  & {
+    border: 1px solid color.$grey-2;
+    list-style: none;
+    padding: 15px;
+    margin-bottom: 10px;
+    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+    background: white;
+    overflow-wrap: break-word;
+  }
 }
 
 .annotation-card:hover {
@@ -144,5 +147,8 @@
 
 .annotation-card__text {
   @include typography.styled-text;
-  overflow-wrap: break-word;
+
+  & {
+    overflow-wrap: break-word;
+  }
 }

h/static/styles/components/_form-input.scss

@@ -93,11 +93,12 @@
       font-weight: bold;
     }
 
-    position: absolute;
-    bottom: 10px;
-    right: $h-padding;
-
-    color: color.$grey-5;
+    & {
+      position: absolute;
+      bottom: 10px;
+      right: $h-padding;
+      color: color.$grey-5;
+    }
   }
 
   .form-input__required {

h/static/styles/components/_link.scss

@@ -4,15 +4,20 @@
 // ----------
 
 @mixin link {
-  color: inherit;
+  & {
+    color: inherit;
+  }
+
   &:visited {
     color: inherit;
   }
 }
 
 @mixin link-underline($style) {
-  padding-bottom: 1px;
-  border-bottom: 1px #{$style};
+  & {
+    padding-bottom: 1px;
+    border-bottom: 1px #{$style};
+  }
 }
 
 // A standard text link.

h/static/styles/components/_lozenge.scss

@@ -29,11 +29,13 @@
 .lozenge__close {
   @include reset.reset-button;
 
-  color: color.$grey-6;
-  font-weight: bold;
-  padding: 0px 5px 0px 5px;
-  cursor: default;
-  border-radius: 0 2px 2px 0;
+  & {
+    color: color.$grey-6;
+    font-weight: bold;
+    padding: 0px 5px 0px 5px;
+    cursor: default;
+    border-radius: 0 2px 2px 0;
+  }
 
   &:hover {
     background-color: color.$grey-4;

h/static/styles/components/_search-result-sidebar.scss

@@ -78,16 +78,19 @@
 
 .search-result-sidebar__tag {
   @include reset.reset-button;
-  background-color: color.$grey-2;
-  border-radius: 2px;
-  margin-bottom: 5px;
-  margin-right: 7px;
-  padding-bottom: 1px;
-  padding-top: 1px;
-  padding-left: 3px;
-  padding-right: 3px;
-  border-radius: 3px 3px;
-  font-weight: bold;
+
+  & {
+    background-color: color.$grey-2;
+    border-radius: 2px;
+    margin-bottom: 5px;
+    margin-right: 7px;
+    padding-bottom: 1px;
+    padding-top: 1px;
+    padding-left: 3px;
+    padding-right: 3px;
+    border-radius: 3px 3px;
+    font-weight: bold;
+  }
 }
 
 .search-result-sidebar__tag-container {
@@ -104,10 +107,13 @@
 
 .search-result-sidebar__username {
   @include reset.reset-button;
-  font-weight: bold;
-  margin-right: 3px;
-  margin-bottom: 7px;
-  color: color.$grey-6;
+
+  & {
+    font-weight: bold;
+    margin-right: 3px;
+    margin-bottom: 7px;
+    color: color.$grey-6;
+  }
 }
 
 .search-result-sidebar__organization {

h/static/styles/components/_search.scss

@@ -292,9 +292,12 @@ $stats-icon-column-width: 20px;
 
 .search-bucket-stats__collapse-view {
   @include reset.reset-button;
-  color: color.$grey-6;
-  margin-bottom: 15px;
-  text-align: left;
+
+  & {
+    color: color.$grey-6;
+    margin-bottom: 15px;
+    text-align: left;
+  }
 }
 
 .search-bucket-stats__collapse-view-icon {

h/static/styles/components/_tooltip.scss

@@ -3,19 +3,21 @@
 @use "../core/typography";
 
 @mixin tooltip-arrow($rotation) {
-  background: color.$grey-7;
-  border-bottom: 1px solid rgba(0,0,0,0.20);
-  border-right: 1px solid rgba(0,0,0,0.20);
-  content: "";
-  display: none;
-  height: 6px;
-  left: 0;
-  margin-left: auto;
-  margin-right: 7px;
-  position: absolute;
-  right: 0;
-  transform: rotate($rotation);
-  width: 6px;
+  & {
+    background: color.$grey-7;
+    border-bottom: 1px solid rgba(0,0,0,0.20);
+    border-right: 1px solid rgba(0,0,0,0.20);
+    content: "";
+    display: none;
+    height: 6px;
+    left: 0;
+    margin-left: auto;
+    margin-right: 7px;
+    position: absolute;
+    right: 0;
+    transform: rotate($rotation);
+    width: 6px;
+  }
 
   .env-js-capable & {
     display: block;
@@ -59,9 +61,12 @@
 // Arrow at the bottom of the tooltip pointing down at the target element.
 .tooltip:before {
   @include tooltip-arrow(45deg);
-  content: "";
-  top: calc(100% - 5px);
-  right: calc(100% - 16.5px);
+
+  & {
+    content: "";
+    top: calc(100% - 5px);
+    right: calc(100% - 16.5px);
+  }
 }
 
 .tooltip-label {