=set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)
  font-size: $font-size
  min-height: $button-height
  $horizontal-padding-width: $font-size * $horizontal-padding
  +padding(horizontal, $horizontal-padding-width)
  +padding(vertical, $vertical-padding)
  &.is-icon
    font-size: $font-size * 1.5
  &.is-radio
    $radio-input-size: $font-size * 1.25
    $radio-check-icon-size: $font-size * .6
    padding-left: $radio-input-size + $horizontal-padding-width
    &::before
      +size($radio-input-size)
      +position(absolute, left $horizontal-padding-width, top 50%)
      margin-top: $radio-input-size / -2
    &.is-active
      &::after
        +size($radio-check-icon-size)
        +position(absolute, left $horizontal-padding-width, top 50%)
        margin-top: $radio-check-icon-size / -2
        margin-left: ($radio-input-size - $radio-check-icon-size) / 2
  &.is-border
    +padding(vertical, $vertical-padding - .125rem)
    &.is-icon
      +padding(vertical, 0)

=button-style-border($color)
  color: $color
  border-color: $color
  &:hover
    background-color: rgba($color, .2)
  &:active
    background-color: $color
    color: luma_contrast_color($color)
  &.is-radio
    &::before
      border: solid .0625rem
    &:hover
      &::before
        box-shadow: 0 0 2px 1px $info
    &.is-active
      &::before
        border-color: $warning
    &::after
      background-color: $warning

=button-style-colord($color)
  color: luma_contrast_color($color)
  background-color: $color
  &:hover
    background-color: darken($color, 20%)
  &:active
    background-color: darken($color, 20%)

.is-button
  line-height: 1.45
  transition: all .2s ease-in
  i,
  .is-button__icon
    margin-right: .4em
  &.is-icon
    i,
    .is-button__icon
      margin-right: 0
  &.is-xs
    $font-size: $xs-button-font-size
    $button-height: $font-size * $button-xs-height-ratio
    $vertical-padding: ($button-height - ($font-size * 1.45))/2
    $horizontal-padding: $button-xs-horizontal-padding
    +set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)
  &.is-sm
    $font-size: $sm-button-font-size
    $button-height: $font-size * $button-sm-height-ratio
    $vertical-padding: ($button-height - ($font-size * 1.45))/2
    $horizontal-padding: $button-sm-horizontal-padding
    +set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)
  &.is-md
    $font-size: $md-button-font-size
    $button-height: $font-size * $button-md-height-ratio
    $vertical-padding: ($button-height - ($font-size * 1.45))/2
    $horizontal-padding: $button-md-horizontal-padding
    +set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)
  &.is-lg
    $font-size: $lg-button-font-size
    $button-height: $font-size * $button-lg-height-ratio
    $vertical-padding: ($button-height - ($font-size * 1.45))/2
    $horizontal-padding: $button-lg-horizontal-padding
    +set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)
  &.is-xl
    $font-size: $xl-button-font-size
    $button-height: $font-size * $button-xl-height-ratio
    $vertical-padding: ($button-height - ($font-size * 1.45))/2
    $horizontal-padding: $button-xl-horizontal-padding
    +set-button-size($font-size, $button-height, $horizontal-padding, $vertical-padding)

  &.is-icon
    +padding(vertical, 0)

  &.is-radio
    +position(relative)
    &::before
      content: ""
      display: block
      border-radius: 50%
    &.is-active
      &::after
        content: ""
        display: block
        border-radius: 50%

  &.is-border-radius
    border-radius: .25rem
    .is-button-group li:first-child &
      +border-radius(left, .25rem)
    .is-button-group li:last-child &
      +border-radius(right, .25rem)
  &.is-sm-border-radius
    border-radius: .125rem
    .is-button-group li:first-child &
      +border-radius(left, .125rem)
    .is-button-group li:last-child &
      +border-radius(right, .125rem)
  &.is-left-border-radius
    +border-radius(left, .25rem)
  &.is-right-border-radius
    +border-radius(right, .25rem)

  &.is-border
    border: solid .0625rem
    .is-button-group li:not(:last-child) &
      border-right: none
    &.is-primary
      +button-style-border($primary)
    &.is-secondary
      +button-style-border($secondary)
    &.is-warning
      +button-style-border($warning)
    &.is-danger
      +button-style-border($danger)
    &.is-info
      +button-style-border($info)

  &.is-colord
    .is-button-group li:not(:last-child) &
      border-right: none
    &.is-primary
      +button-style-colord($primary)
    &.is-secondary
      +button-style-colord($secondary)
    &.is-warning
      +button-style-colord($warning)
    &.is-danger
      +button-style-colord($danger)
    &.is-info
      +button-style-colord($info)