$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

$button-focus: $link-focus !default
$button-focus-border: $link-focus-border !default

$button-active: $link-active !default
$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
  @return abs($x) / 2

=button-icon($button-size)
  $small-spacing: buttonIconSpacing($button-size, 1rem)
  $normal-spacing: buttonIconSpacing($button-size, 1.5rem)
  $medium-spacing: buttonIconSpacing($button-size, 2rem)
  $large-spacing: buttonIconSpacing($button-size, 3rem)
  .icon
    &:first-child:not(:last-child)
      margin-left: -$normal-spacing / 2
      margin-right: $normal-spacing
    &:last-child:not(:first-child)
      margin-left: $normal-spacing
      margin-right: -$normal-spacing / 2
    &:first-child:last-child
      margin-left: calc(-1px - #{$normal-spacing})
      margin-right: calc(-1px - #{$normal-spacing})
    &.is-small
      &:first-child:not(:last-child)
        margin-left: -$small-spacing / 2
        margin-right: $small-spacing
      &:last-child:not(:first-child)
        margin-left: $small-spacing
        margin-right: -$small-spacing / 2
      &:first-child:last-child
        margin-left: calc(-1px - #{$small-spacing})
        margin-right: calc(-1px - #{$small-spacing})
    &.is-medium
      &:first-child:not(:last-child)
        margin-left: -$medium-spacing / 2
        margin-right: $medium-spacing
      &:last-child:not(:first-child)
        margin-left: $medium-spacing
        margin-right: -$medium-spacing / 2
      &:first-child:last-child
        margin-left: calc(-1px - #{$medium-spacing})
        margin-right: calc(-1px - #{$medium-spacing})
    &.is-large
      &:first-child:not(:last-child)
        margin-left: -$large-spacing / 2
        margin-right: $large-spacing
      &:last-child:not(:first-child)
        margin-left: $large-spacing
        margin-right: -$large-spacing / 2
      &:first-child:last-child
        margin-left: calc(-1px - #{$large-spacing})
        margin-right: calc(-1px - #{$large-spacing})

// 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
  padding-right: 1em
  text-align: center
  white-space: nowrap
  strong
    color: inherit
  +button-icon($size-normal)
  // States
  &:hover,
  &.is-hovered
    border-color: $button-hover-border
    color: $button-hover
  &:focus,
  &.is-focused
    border-color: $button-focus-border
    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
    color: $button-focus
  &:active,
  &.is-active
    border-color: $button-active-border
    box-shadow: $button-shadow-inset
    color: $button-active
  // Colors
  &.is-link
    background-color: transparent
    border-color: transparent
    color: $text
    text-decoration: underline
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      background-color: $background
      color: $text-strong
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      border-color: transparent
      color: $color-invert
      &:hover,
      &.is-hovered
        background-color: darken($color, 2.5%)
        border-color: transparent
        color: $color-invert
      &:focus,
      &.is-focused
        border-color: transparent
        box-shadow: 0 0 0.5em rgba($color, 0.25)
        color: $color-invert
      &:active,
      &.is-active
        background-color: darken($color, 5%)
        border-color: transparent
        box-shadow: $button-shadow-inset
        color: $color-invert
      &.is-inverted
        background-color: $color-invert
        color: $color
        &:hover
          background-color: darken($color-invert, 5%)
      &.is-loading
        &:after
          border-color: transparent transparent $color-invert $color-invert !important
      &.is-outlined
        background-color: transparent
        border-color: $color
        color: $color
        &:hover,
        &:focus
          background-color: $color
          border-color: $color
          color: $color-invert
      &.is-inverted.is-outlined
        background-color: transparent
        border-color: $color-invert
        color: $color-invert
        &:hover,
        &:focus
          background-color: $color-invert
          color: $color
  // Sizes
  &.is-small
    +button-small
  &.is-medium
    +button-medium
  &.is-large
    +button-large
  // Modifiers
  &[disabled],
  &.is-disabled
    opacity: 0.5
  &.is-fullwidth
    display: flex
    width: 100%
  &.is-loading
    color: transparent !important
    pointer-events: none
    &:after
      +loader
      +center(16px)
      position: absolute !important