=button-base
  +inline-block(middle)
  cursor: pointer
  text-align: center
  +user-select(none)
  touch-action: manipulation
  text-decoration: none
  -webkit-tap-highlight-color: transparent

=button-size($size, $border-width: 0, $border-radius: 4px)
  $font-size: ""
  @if $size == 'xs'
    $font-size: $xs-button-font-size
  @else if $size == 'sm'
    $font-size: $sm-button-font-size
  @else if $size == 'md'
    $font-size: $md-button-font-size
  @else if $size == 'lg'
    $font-size: $lg-button-font-size
  @else if $size == 'xl'
    $font-size: $xl-button-font-size
  $height: round($font-size * 2 + $font-size/2.2)
  @if $border-width
    +border(all, $border-width)
  @else
    $border-width: 0
  +text-block($font-size $height - ($border-width*2))
  height: $height
  +padding(horizontal, $height/1.6)
  @if $border-radius
    +border-radius($border-radius)
  @if $font-size > 12px
    font-weight: bold
  i,
  .is-button-icon
    @if $font-size > 28
      margin-right: $font-size/4
    @else
      margin-right: $font-size/3
  &.has-right-icon
    i,
    .is-button-icon
      margin-right: 0
      @if $font-size > 28
        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 $height/2, top 0)
      line-height: $height - ($border-width*2)
    input
      +padding(horizontal, ($height + if($font-size > 28, $font-size/4, $font-size/3)) $height/2)
      height: $height - ($border-width*2)

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