=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

=button-size($size, $border-width: false, $border-radius: .25rem, $button-height-ratio: 2.85)
  $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
  $button-height: $font-size * $button-height-ratio - if($border-width, $border-width, 0) * 2
  @if $border-width
    +border(all, $border-width)
  @else
    $border-width: 0
  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)
  +padding(horizontal, $button-height/1.6)
  @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
    $icon-width: $font-size * 2.7
    $icon-size: $font-size * 1.3
    position: relative
    &: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
      padding: 0 (($font-size * 1.4) + $icon-width) 0 ($font-size * 1.4)
      font-size: inherit
      +padding(vertical, $vertical-padding)
      +position(relative, 1)
  &.is-radio,
  &.is-checkbox
    $icon-space: $font-size * 2.2
    padding-left: $icon-space
    position: relative
    &: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)
    i,
    .is-button-icon
      margin-right: 0


  // button-grounp
  .is-button-group >li &
    border-radius: 0
  .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


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