Button: Fix the spacing with an icon

src/atoms/Button.svelte

@@ -4,20 +4,17 @@
     export let className = 'button'
     export let text = ''
 
-    // Wrap string's each letters into a span
-    // const textSpans = text
-    //     .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
-    //     .replace(/ /g, '\u00a0')
+    const hasSlot = arguments[1].$$slots !== undefined
 </script>
 
 {#if type === 'button'}
-<button class={className} data-text={text}>
+<button class={className} class:button-icon={hasSlot} data-text={text}>
     <slot></slot>
     <span>{text}</span>
 </button>
 
 {:else}
-<a {href} class={className} data-text={text}>
+<a {href} class={className} class:button-icon={hasSlot} data-text={text}>
     <slot></slot>
     <span>{text}</span>
 </a>

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);
+            }
         }
     }
 }