get back animation of controls on comment hover

web/app/components/comment/__action/comment__action.scss

@@ -1,7 +1,7 @@
 .comment__action {
-  color: #777;
+  margin-left: 8px;
   font-weight: 700;
-  margin-right: 12px;
+  color: #777;
   cursor: pointer;
 
   &:hover {

web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss

@@ -1,9 +0,0 @@
-.comment__controls_view_admin {
-  &:not(:first-child) {
-    &::before {
-      content: '•';
-      margin-right: 12px;
-      color: #777;
-    }
-  }
-}

web/app/components/comment/__controls/comment__controls.scss

@@ -1,5 +1,19 @@
 .comment__controls {
-  display: inline-block;
-  font-size: 12px;
+  display: inline;
   user-select: none;
+
+  @media (hover: hover) {
+    margin-left: 0;
+    transition: transform .2s .1s ease-out, opacity .2s .1s ease-out;
+    font-weight: 700;
+    opacity: 0;
+  }
+
+  + .comment__controls_view_admin {
+    &::before {
+      content: '•';
+      margin-left: 8px;
+      color: #777;
+    }
+  }
 }

web/app/components/comment/comment.scss

@@ -6,4 +6,13 @@
   margin-bottom: $offset;
   font-size: 16px;
   line-height: 1.2;
+
+  @media (hover: hover) {
+    &:hover {
+      .comment__controls {
+        transform: translateX(8px);
+        opacity: 1;
+      }
+    }
+  }
 }

web/app/components/comment/index.js

@@ -5,10 +5,7 @@ require('./comment.scss');
 require('./__action/comment__action.scss');
 require('./__avatar/comment__avatar.scss');
 require('./__body/comment__body.scss');
-
 require('./__controls/comment__controls.scss');
-require('./__controls/_view/_admin/comment__controls_view_admin.scss');
-
 require('./__info/comment__info.scss');
 require('./__input/comment__input.scss');
 require('./__score/comment__score.scss');