Use CSS to show separators in moderation actions

This is useful for people using screen readers, since the character used
as a separator won't be read aloud.

Since many screen readers also read content generated via CSS
pseudoelements, we aren't using `content: "|";` or similar but using
elements with a very small width instead.

app/assets/stylesheets/moderation_actions.scss

@@ -7,4 +7,30 @@
   button {
     @include link;
   }
+
+  @mixin separator {
+    content: "";
+    display: inline-block;
+    margin: 0 0.3em;
+    vertical-align: middle;
+  }
+
+  > * + *::before {
+    @include separator;
+    background: currentcolor;
+    height: 1em;
+    opacity: 0.5;
+    width: 1px;
+  }
+
+  .comment & {
+    > *::before {
+      @include separator;
+      background: $text-light;
+      border-radius: 100%;
+      opacity: 1;
+      height: 0.25em;
+      width: 0.25em;
+    }
+  }
 }

app/components/shared/moderation_actions_component.html.erb

@@ -11,8 +11,6 @@
   <% end %>
 
   <% if can? :hide, author %>
-    <%= raw separator %>
-
     <%= render Admin::ActionComponent.new(
       :block_author,
       author,

app/components/shared/moderation_actions_component.rb

@@ -19,12 +19,4 @@ class Shared::ModerationActionsComponent < ApplicationComponent
     def hide_path
       polymorphic_path([:moderation, record], action: :hide)
     end
-
-    def separator
-      if record.is_a?(Comment)
-        "&nbsp;&bull;&nbsp;"
-      else
-        "&nbsp;|&nbsp;"
-      end
-    end
 end

app/views/comments/_actions.html.erb

@@ -3,8 +3,8 @@
 </span>
 
 <% if can?(:hide, comment) || can?(:hide, comment.user) %>
-  <span class="divider">&nbsp;&bull;&nbsp;</span>
   <% if comment.author == current_user %>
+    <span class="divider">&nbsp;&bull;&nbsp;</span>
     <%= link_to t("comments.actions.delete"),
                 hide_comment_path(comment),
                 method: :put, remote: true, class: "delete-comment",