$button-font-weight: 700 !default;
$button-default-color: 'primary' !default;

$button-padding-vertical: calc(0.75em - #{$control-border-width}) !default;
$button-padding-horizontal: calc(0.70em - #{$control-border-width}) !default;

$button-default-disabled-bg-color: $grey !default;
$button-default-disabled-color: $dark-grey !default;

$button-disabled-bg-color: $grey-lighter !default;
$button-disabled-color: $grey-light !default;

$button-icon-gap: 0.7em;

//  Sizes

$button-small-font-size: .85em !default;
$button-small-padding-vertical: calc(0.65em - #{$control-border-width}) !default;
$button-small-padding-horizontal: calc(0.8em - #{$control-border-width}) !default;

.button {
  @extend %control;
  @extend %unselectable;
  cursor: pointer;
  font-weight: $button-font-weight;
  padding: $button-padding-vertical $button-padding-horizontal;
  justify-content: center;
  white-space: nowrap;
  align-items: baseline;

  strong {
    color: inherit;
  }

  $default-colors-pair: map-get($colors, $button-default-color);
  $def-color: nth($default-colors-pair, 1);
  $def-color-invert: nth($default-colors-pair, 2);

  background-color: $def-color;
  border-color: $def-color;
  color: $def-color-invert;

  &.is-inverted {
    background-color: $def-color-invert;
    border-color: $def-color-invert;
    color: $def-color;

    &:hover {
      background-color: $def-color;
      border-color: $def-color;
      color: $def-color-invert;
    }
  }

  //  States
  @include buttonHoverColor($def-color);
  @include buttonOutlined($def-color);

  //  Colors
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      border-color: $color;
      color: $invert;

      //  States
      @include buttonHoverColor($color);
      @include buttonOutlined($color);

      &.is-inverted {
        background-color: $invert;
        border-color: $invert;
        color: $color;

        &:hover {
          background-color: $color;
          border-color: $color;
          color: $invert;
        }
      }

      &[disabled],
      &.is-disabled {
        @if ($name != $button-default-color) {
          background-color: $button-disabled-bg-color;
          border-color: $button-disabled-bg-color;
          color: $button-disabled-color;
        } @else {
          background-color: $button-default-disabled-bg-color;
          border-color: $button-default-disabled-bg-color;
          color: $button-default-disabled-color;
        }
      }
    }
  }

  &[disabled],
  &.is-disabled {
    background-color: $button-default-disabled-bg-color;
    border-color: $button-default-disabled-bg-color;
    color: $button-default-disabled-color;
  }

  //  Sizes
  &.is-small {
    font-size: $button-small-font-size;
    padding: $button-small-padding-vertical $button-small-padding-horizontal;
  }

  .icon {
    height: 1em;
    width: 1em;

    &:not(:last-child) {
      margin-right: $button-icon-gap;
    }

    &:last-child:not(:first-child) {
      margin-left: $button-icon-gap;
    }
  }
}