Button: Fix the spacing with an icon

src/style/atoms/_button.scss

@@ -5,7 +5,7 @@
     align-items: center;
     height: 40px;
     overflow: hidden;
-    padding: 0 16px;
+    padding: 1px 16px 0;
     background: #fff;
     font-family: $font-sans-sb;
     font-size: rem(14px);
@@ -56,14 +56,23 @@
         position: absolute;
         display: block;
         top: 50%;
-        left: calc(50% + 19px);
+        left: 0;
         width: 100%;
-        transform: translate3d(-50%, -120%, 0);
+        transform: translate3d(0, -120%, 0);
     }
     span, &:after {
         transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
     }
 
+    // Button has an icon (offset the hovered text)
+    &-icon:after {
+        left: 13px;
+
+        @include breakpoint (sm) {
+            left: 19px;
+        }
+    }
+
     // Hover
     &:hover {
         color: #fff;
@@ -81,7 +90,11 @@
         }
         &:after {
             opacity: 1;
-            transform: translate3d(-50%, -50%, 0);
+            transform: translate3d(0, -47%, 0);
+
+            @include breakpoint (sm) {
+                transform: translate3d(0, -50%, 0);
+            }
         }
     }
 }