Extract redacted-content pattern into molecules

src/styles/mixins/molecules.scss

@@ -21,3 +21,32 @@
     }
   }
 }
+
+/**
+ * A pattern for displaying redacted (moderated) text content
+ */
+@mixin redacted-content {
+  // Hidden annotations displayed to moderators, where the content is still
+  // present.
+  &.has-content {
+    text-decoration: line-through;
+    filter: grayscale(100%) contrast(65%);
+  }
+
+  // Hidden annotations displayed to non-moderators, where the content has been
+  // filtered out by the service.
+  &:not(.has-content) {
+    // Create a column of horizontal stripes, giving the impression of text
+    // underneath that has been censored.
+    display: block;
+    height: 60px;
+    width: 100vw;
+    background: repeating-linear-gradient(
+      to bottom,
+      var.$grey-2,
+      var.$grey-2 15px,
+      white 15px,
+      white 20px
+    );
+  }
+}

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

 @use '../../variables' as var;
 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 
 .annotation-body__text {
-  // Hidden annotations displayed to moderators, where the content is still
-  // present.
-  &.is-hidden.has-content {
-    text-decoration: line-through;
-    filter: grayscale(100%) contrast(65%);
-  }
-
-  // Hidden annotations displayed to non-moderators, where the content has been
-  // filtered out by the service.
-  &.is-hidden:not(.has-content) {
-    // Create a column of horizontal stripes, giving the impression of text
-    // underneath that has been censored.
-    display: block;
-    height: 60px;
-    width: 100vw;
-    background: repeating-linear-gradient(
-      to bottom,
-      var.$grey-2,
-      var.$grey-2 15px,
-      white 15px,
-      white 20px
-    );
+  &.is-hidden {
+    @include molecules.redacted-content;
   }
 }