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 {
-    transition: max-height $expand-duration ease-in;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .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.
-    //
-    // See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-    // and https://github.com/hypothesis/client/issues/1518.
-    display: inline-block;
-    width: 100%;
-  }
-
-  // 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 {
+  transition: max-height $expand-duration ease-in;
+  overflow: hidden;
+  position: relative;
+}
 
-  .excerpt__toggle-button {
-    @include buttons.reset-native-btn-styles;
-    font-style: italic;
-  }
+.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.
+  //
+  // See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+  // and https://github.com/hypothesis/client/issues/1518.
+  display: inline-block;
+  width: 100%;
+}
 
-  .excerpt__toggle-link > a {
-    color: var.$color-text;
-    font-style: italic;
-    font-weight: normal;
-  }
+// inline controls for expanding and collapsing
+// the excerpt
+.excerpt__inline-controls {
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 
-  // a shadow displayed at the bottom of an <excerpt>s with inline controls
-  // disabled, which provides a hint that the excerpt is collapsed
-  // -------------
+.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
+  );
+}
 
-  // 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;
+// TODO the tap target here is quite small
+.excerpt__toggle-button {
+  @include buttons.reset-native-btn-styles;
+  background: transparent;
+  font-style: italic;
+}
 
-  .excerpt__shadow {
-    position: absolute;
-    left: $shadow-h-offset;
-    right: $shadow-h-offset;
-    bottom: 0;
-    height: 40px;
-    background-image: linear-gradient(
-      to bottom,
-      transparent 50%,
-      rgba(0, 0, 0, 0.08) 95%,
-      rgba(0, 0, 0, 0.13) 100%
-    );
-    transition: opacity $expand-duration linear;
-  }
+// 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: var.$touch-target-size;
+  background-image: linear-gradient(
+    to bottom,
+    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 {
-    background-image: none;
-  }
+.excerpt__shadow--transparent {
+  background-image: none;
+}
 
-  .excerpt__shadow.is-hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
+.excerpt__shadow.is-hidden {
+  opacity: 0;
+  pointer-events: none;
 }