=button-base
  display: inline-flex
  align-items: center
  justify-content: center
  cursor: pointer
  text-align: center
  user-select: none
  touch-action: manipulation
  text-decoration: none
  -webkit-tap-highlight-color: transparent
  &[type="button"],
  &[type="reset"],
  &[type="submit"]
    display: inline-block
    &.is-block
      display: block
  .is-block
    select
      display: block
      width: 100%

=button-size($size, $border-width: false, $border-radius: .25rem)
  $font-size: ""
  $button-height: ""
  @if $size == 'xs'
    $font-size: $xs-button-font-size
    $button-height: $font-size * $button-xs-height-ratio - if($border-width, $border-width, 0) * 2
    +padding(horizontal, ($button-height/$button-xs-width-ratio))
  @else if $size == 'sm'
    $font-size: $sm-button-font-size
    $button-height: $font-size * $button-sm-height-ratio - if($border-width, $border-width, 0) * 2
    +padding(horizontal, ($button-height/$button-sm-width-ratio))
  @else if $size == 'md'
    $font-size: $md-button-font-size
    $button-height: $font-size * $button-md-height-ratio - if($border-width, $border-width, 0) * 2
    +padding(horizontal, ($button-height/$button-md-width-ratio))
  @else if $size == 'lg'
    $font-size: $lg-button-font-size
    $button-height: $font-size * $button-lg-height-ratio - if($border-width, $border-width, 0) * 2
    +padding(horizontal, ($button-height/$button-lg-width-ratio))
  @else if $size == 'xl'
    $font-size: $xl-button-font-size
    $button-height: $font-size * $button-xl-height-ratio - if($border-width, $border-width, 0) * 2
    +padding(horizontal, ($button-height/$button-xl-width-ratio))
  @if $border-width
    border-width: $border-width
  @else
    $border-width: 0
  height: auto
  min-height: $button-height
  $vertical-padding: ($button-height - (($font-size * 1.45) - ($border-width * 2))) / 2
  +padding(vertical, $vertical-padding)
  +text-block($font-size 1.45)
  @if $border-radius
    border-radius: $border-radius
  @if $font-size > .6875rem and 1rem > $font-size
    font-weight: 600
  @else if .999999rem < $font-size
    font-weight: bold
  i,
  .is-button-icon
    @if $font-size > 1.75rem
      margin-right: $font-size/4
    @else
      margin-right: $font-size/3
  &.has-right-icon
    i,
    .is-button-icon
      margin-right: 0
      @if $font-size > 1.75rem
        margin-left: $font-size/4
      @else
        margin-left: $font-size/3
  &.is-input-container
    padding: 0
    position: relative
    i,
    .is-button-icon
      +position(absolute, left $button-height/2, top 0)
      line-height: $button-height - ($border-width*2)
    input
      +padding(horizontal, ($button-height + if($font-size > 1.75rem, $font-size/4, $font-size/3)) $button-height/2)
      height: $button-height - ($border-width*2)
  &.is-dummy-select
    $icon-width: round($font-size * 2.7)
    $icon-size: round($font-size * 1.3)
    $button-height: $button-height
    padding-left: $icon-width
    &:before
      +fa("\f0d7")
      +position(absolute, left 0, top 0)
      border-right: .0625rem solid shade($secondary, 15%)
      +text-block($icon-size ($button-height - $border-width * 2), center shade($secondary, 55%))
      +size($icon-width $button-height)
  &.is-select
    padding: 0
    height: auto
    $icon-width: $font-size * 2.7
    $icon-size: $font-size * 1.3
    position: relative
    overflow: hidden
    &:after
      +fa("\f0d7")
      +position(absolute, right 0, top 0 bottom 0, 0)
      +text-block($icon-size ($button-height + ($border-width * 2)), center)
      +size($icon-width null)
    select
      font-size: inherit
      height: $button-height
      +padding(horizontal, (($font-size * 1.4) ($font-size * 1.4) + $icon-width))
      +padding(vertical, $vertical-padding)
      +position(relative, 1)
  &.is-radio,
  &.is-checkbox
    $icon-space: $font-size * 3
    padding-left: $icon-space
    position: relative
    *
      cursor: pointer
    &:before
      content: ""
      display: block
      +position(absolute, left 1rem, top 50%)
      $check-base-size: $font-size * .9
      +size($check-base-size)
      margin-top: $check-base-size / -2
    &:after
      $check-icon-size: $font-size * 1.4
      +fa("\f00c")
      opacity: 0
      +size($check-icon-size)
      +text-block($check-icon-size 1, $button-checked-icon-color)
      text-shadow: rgba(black, .4) 0 .0625rem .0625rem
      +position(absolute, left .875rem, top 50%)
      margin-top: $check-icon-size / -2 * 1.2
  &.is-icon
    +padding(horizontal, $button-height/3.5)
    font-size: $font-size * 1.4
    i,
    .is-button-icon
      margin-right: 0

  // button-grounp
  .is-button-group >li:first-child &
    border-radius: $border-radius 0 0 $border-radius
  .is-button-group  >li:last-child &
    border-radius: 0 $border-radius $border-radius 0
  .is-button-group >li:not(:last-child) &
    @if $border-width / 2 < 1
      border-right-width: 0
    @else
      border-right-width: $border-width / 2

// button-grounp
.is-button-group >li [class*="is-button"]
  border-radius: 0


=button-group
  .is-button-group
    @content