=button-small
  border-radius: 2px
  font-size: 11px
  height: 24px
  line-height: 16px
  padding: 3px 6px
=button-medium
  font-size: 18px
  height: 40px
  padding: 7px 14px
=button-large
  font-size: 22px
  height: 48px
  padding: 11px 20px

.button
  +control
  padding: 3px 10px
  text-align: center
  white-space: nowrap
  strong
    color: inherit
  small
    display: block
    font-size: $size-small
    line-height: 1
    margin-top: 5px
  .fa
    line-height: 24px
    margin: 0 -2px
    width: 24px
  &:hover
    color: $control-hover
  &:active
    box-shadow: inset 0 1px 2px rgba(black, 0.2)
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background: $color
      border-color: transparent
      color: $color-invert
      &:hover,
      &:focus
        background: darken($color, 10%)
        border-color: transparent
        color: $color-invert
      &:active
        border-color: transparent
      &.is-outlined
        background: transparent
        border-color: $color
        color: $color
        &:hover,
        &:focus
          border-color: darken($color, 10%)
          color: darken($color, 10%)
      &.is-inverted
        background: $color-invert
        color: $color
        &:hover
          background: darken($color-invert, 5%)
        &.is-outlined
          background-color: transparent
          border-color: $color-invert
          color: $color-invert
          &:hover
            background: rgba(black, 0.05)
      &.is-loading:after
        border-color: transparent transparent $color-invert $color-invert !important
  &.is-small
    +button-small
  &.is-medium
    +button-medium
  &.is-large
    +button-large
  &.is-fullwidth
    display: block
    width: 100%
  &.is-flexible
    height: auto
  &.is-loading
    color: transparent
    pointer-events: none
    &:after
      @extend .loader
      +center(16px)
      position: absolute !important
  &.is-disabled,
  &[disabled]
    opacity: 0.5
    pointer-events: none
  +tablet
    small
      color: $text
      left: 0
      margin-top: 10px
      position: absolute
      top: 100%
      width: 100%