Consolidate some styling in `Excerpt`

src/styles/sidebar/components/excerpt.scss

 @use "../../mixins/buttons";
 @use "../../variables" as var;
 
-// FIXME - Remove the `@at-root` here when SASS modules are used, as local
-// variables will no longer be exposed to other modules.
-@at-root {
-  $expand-duration: 0.15s;
+// the distance by which the shadow indicating a collapsed
+// annotation expands beyond the left/right edges of the card.
+// This value is chosen such that the shadow expands to the full width of
+// the card
+$shadow-h-offset: -12px;
+$expand-duration: 0.15s;
 
-  .excerpt {
+.excerpt {
   transition: max-height $expand-duration ease-in;
   overflow: hidden;
   position: relative;
-  }
+}
 
-  .excerpt__content {
+.excerpt__content {
   // Create a new block-formatting context. This prevents any margins on
   // elements inside the excerpt from "leaking out" due to margin-collapsing,
   // which would push this container element away from the top of the excerpt.
@@ -21,65 +23,57 @@
   // and https://github.com/hypothesis/client/issues/1518.
   display: inline-block;
   width: 100%;
-  }
+}
 
-  // inline controls for expanding and collapsing
-  // the <excerpt>
-  // -------------
-  .excerpt__inline-controls {
+// inline controls for expanding and collapsing
+// the excerpt
+.excerpt__inline-controls {
   display: block;
   position: absolute;
   right: 0;
   bottom: 0;
-  }
+}
 
-  .excerpt__toggle-link {
-    padding-left: 15px;
-    background-image: linear-gradient(to right, transparent 0px, white 12px);
-  }
+.excerpt__toggle-link {
+  padding-left: var.$layout-space;
+  // See https://stackoverflow.com/a/56548711/9788954 regarding
+  // rgba(255, 255, 255, 0) used here instead of `transparent` (for Safari)
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0px,
+    var.$color-background var.$layout-space
+  );
+}
 
-  .excerpt__toggle-button {
+// TODO the tap target here is quite small
+.excerpt__toggle-button {
   @include buttons.reset-native-btn-styles;
+  background: transparent;
   font-style: italic;
-  }
-
-  .excerpt__toggle-link > a {
-    color: var.$color-text;
-    font-style: italic;
-    font-weight: normal;
-  }
-
-  // a shadow displayed at the bottom of an <excerpt>s with inline controls
-  // disabled, which provides a hint that the excerpt is collapsed
-  // -------------
-
-  // the distance by which the shadow indicating a collapsed
-  // annotation expands beyond the left/right edges of the card.
-  // This value is chosen such that the shadow expands to the full width of
-  // the card
-  $shadow-h-offset: -12px;
+}
 
-  .excerpt__shadow {
+// a shadow displayed at the bottom of an <excerpt>s with inline controls
+// disabled, which provides a hint that the excerpt is collapsed
+.excerpt__shadow {
   position: absolute;
   left: $shadow-h-offset;
   right: $shadow-h-offset;
   bottom: 0;
-    height: 40px;
+  height: var.$touch-target-size;
   background-image: linear-gradient(
     to bottom,
-      transparent 50%,
+    rgba(255, 255, 255, 0) 50%,
     rgba(0, 0, 0, 0.08) 95%,
     rgba(0, 0, 0, 0.13) 100%
   );
   transition: opacity $expand-duration linear;
-  }
+}
 
-  .excerpt__shadow--transparent {
+.excerpt__shadow--transparent {
   background-image: none;
-  }
+}
 
-  .excerpt__shadow.is-hidden {
+.excerpt__shadow.is-hidden {
   opacity: 0;
   pointer-events: none;
-  }
 }