Extract style patterns from AnnotationQuote

src/styles/mixins/molecules.scss

@@ -72,6 +72,23 @@
   filter: grayscale(100%) contrast(65%);
 }
 
+/**
+ * Represent quoted text, as in an excerpt, with a hover or focused state.
+ */
+@mixin quoted-text {
+  border-left: 3px solid var.$color-border;
+  color: var.$color-text-light;
+  font-style: italic;
+  padding: 0 var.$layout-margin;
+
+  // Prevent long URLs etc. in quote causing overflow
+  overflow-wrap: break-word;
+
+  &.is-focused,
+  &:hover {
+    border-left: var.$color-quote 3px solid;
+  }
+}
 /**
  * Base styles for a "panel"-like element, with appropriate
  * padding, heading and close-button styles.

src/styles/sidebar/components/annotation-quote.scss

 @use '../../variables' as var;
+@use "../../mixins/molecules";
 
 .annotation-quote {
-  &.is-orphan {
-    text-decoration: line-through;
-  }
-
   &__quote {
-    border-left: 3px solid var.$color-border;
-    color: var.$color-text-light;
-    font-style: italic;
-    padding: 0 var.$layout-margin;
-
-    // Prevent long URLs etc. in quote causing overflow
-    overflow-wrap: break-word;
+    @include molecules.quoted-text;
   }
-
-  &.is-focused &__quote {
-    border-left: var.$color-quote 3px solid;
+  &.is-orphan &__quote {
+    // In orphans, quotes should be rendered as if they're missing/redacted
+    @include molecules.redacted-content;
   }
 }