Fix button icons

sass/elements/button.sass

@@ -1,3 +1,7 @@
+$button:                     $grey-darker !default
+$button-background:          $white !default
+$button-border:              $grey-lighter !default
+
 $button-hover: $link-hover !default
 $button-hover-border: $link-hover-border !default
 
@@ -9,17 +13,60 @@ $button-active-border: $link-active-border !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
+@function buttonIconSpacing($button-size, $icon-width)
+  // The rem height of the button
+  $button-height: 2.5 * $button-size
+  // For the button to be square, the horizontal padding + the icon width must equal the button height.
+  // We know that $horizontal-padding = 2em
+  $horizontal-padding: 2 * $button-size
+  // We want to solve:
+  // $button-height = $horizontal-padding + $icon-width + $x
+  $x: $button-height - $horizontal-padding - $icon-width
+  // We divide by 2 to apply this margin on both the left and right sides
+  $negative-margin: abs($x) / 2
+  // We need to remove 1px for the border as well
+  @return calc(-1px - #{$negative-margin})
+
+=button-icon($button-size)
+  .icon
+    &:first-child
+      margin-left: buttonIconSpacing($button-size, 1.5rem)
+    &:last-child
+        margin-right: buttonIconSpacing($button-size, 1.5rem)
+    &.is-small
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 1rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 1rem)
+    &.is-medium
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 2rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 2rem)
+    &.is-large
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 3rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 3rem)
+
+// The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
   font-size: $size-small
+  +button-icon($size-small)
 =button-medium
   font-size: $size-medium
+  +button-icon($size-medium)
 =button-large
   font-size: $size-large
+  +button-icon($size-large)
 
 .button
   +control
   +unselectable
+  background-color: $button-background
+  border: 1px solid $button-border
+  color: $button
   cursor: pointer
   justify-content: center
   padding-left: 1em
@@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   white-space: nowrap
   strong
     color: inherit
-  .icon,
-  .tag
-    &:first-child
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
+  +button-icon($size-normal)
+  .icon
+    &:first-child:not(:last-child)
+      margin-right: 0.25rem !important
+    &:last-child:not(:first-child)
+      margin-left: 0.25rem !important
   // States
   &:hover,
   &.is-hovered
@@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   // Colors
   &.is-link
     background-color: transparent
-    border-width: 0
+    border-color: transparent
     color: $text
     text-decoration: underline
     &:hover,
@@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-width: 0
+      border-color: transparent
       color: $color-invert
       &:hover,
       &.is-hovered