Refactor like/unlike buttons SCSS

We were using the same selectors three times. Since we're going to
change that part of the code, we're simplifying it so we don't have to
do the same changes three times.

app/assets/stylesheets/in_favor_against.scss

@@ -22,41 +22,30 @@
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6) rem-calc(6);
     position: relative;
+  }
+
+  @mixin like-unlike-icon($icon, $pressed-color) {
+    @include has-fa-icon($icon, solid);
 
     &:not([disabled]) {
+      cursor: pointer;
+
       &:hover,
       &:active,
       &[aria-pressed=true] {
+        background: $pressed-color;
+        border-color: $pressed-color;
         color: #fff;
-        cursor: pointer;
       }
     }
   }
 
   .in-favor button {
-    @include has-fa-icon(thumbs-up, solid);
+    @include like-unlike-icon(thumbs-up, $like);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $like;
-        border-color: $like;
-      }
-    }
   }
 
   .against button {
-    @include has-fa-icon(thumbs-down, solid);
+    @include like-unlike-icon(thumbs-down, $unlike);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $unlike;
-        border-color: $unlike;
-      }
-    }
   }
 
   .percentage {

app/assets/stylesheets/layout.scss

@@ -1707,22 +1707,21 @@ table {
     }
   }
 
-  .in-favor button {
+  @mixin like-unlike-icon($icon, $pressed-color) {
-    @include has-fa-icon(thumbs-up, solid);
+    @include has-fa-icon($icon, solid);
 
     &:hover,
     &[aria-pressed=true] {
-      color: $like;
+      color: $pressed-color;
     }
   }
 
-  .against button {
+  .in-favor button {
-    @include has-fa-icon(thumbs-down, solid);
+    @include like-unlike-icon(thumbs-up, $like);
+  }
 
-    &:hover,
+  .against button {
-    &[aria-pressed=true] {
+    @include like-unlike-icon(thumbs-down, $unlike);
-      color: $unlike;
-    }
   }
 }