=button-base
  text-transform: none
  font-weight: 600
  display: inline-flex
  border: solid 1px
  border-radius: .25rem
  font-family: var(--sans-serif)
  line-height: 1.4
  white-space: nowrap
  text-decoration: none
  cursor: pointer
  user-select: none
  align-items: center
  justify-content: center
  transition: all .2s ease-out
  *
    cursor: pointer
  &.is-block
    display: flex
    width: 100%
    max-width: 100%
    &.is-select
      margin-inline: 0
  &:focus
    outline: none
  &:disabled
    cursor: default
    pointer-events: none
    *
      cursor: default
  &.is-select
    select
      +size(100%)
      cursor: pointer
  i
    margin-right: .35em
    margin-top: .02em
    font-size: 1.07em
  &.is-icon
    i
      +text-block(1.35em 1)
      margin-right: 0
  &.is-checkbox
    +position(relative)
    &::before
      content: ""
      +size(.9375em)
      border-radius: .1875em
      display: block
      border: solid 1px var(--background-shade)
      background-color: var(--base)
      +position(absolute, left 1em, top 50%)
      transform: translate(0, -50%)
    &::after
      +fa(fas "\f00c")
      +text-block(1em 1, flex)
      color: var(--reversal-text)
      align-items: center
      justify-content: center
      +size(.9375em)
      +position(absolute, left 1em, top 50%)
      transform: translate(0, -50%)
      opacity: 0
    input:checked + &::before
      border-color: var(--primary)
      background-color: var(--primary)
    input:checked + &::after
      opacity: 1

=input-button-base
  display: inline-block
  vertical-align: middle
  &.is-block
    width: 100%
    display: block

=button-color($color)
  $text-color: if(luma($color) > 50, $default-text, $reversal-text)
  $border-color: if(luma($color) > 80, saturate(darken($color, 12%), 2%), $color)
  background-color: $color
  color: $text-color
  border-color: $border-color
  &.is-secondary
    border-color: var(--input-border)
  &:focus,
  &:active
    box-shadow: 0 0 0 .1875rem rgba($color, .25)
  &:hover,
  &:focus,
  &:active
    $button-color: saturate(darken($color, 4%), 2%)
    $border-color: if(luma($color) > 80, saturate(darken($color, 18%), 2%), $color)
    background-color: $button-color
    border-color: $border-color
  &.is-disabled,
  &:disabled
    color: rgba($text-color, .4)
    border-color: shade($color, 6%)
    pointer-events: none

=border-button-color($color)
  $text-color: $color
  $border-color: $color
  background-color: rgba(255, 255, 255, .1)
  color: $text-color
  border-color: $border-color
  &:focus,
  &:active
    box-shadow: 0 0 0 .1875rem rgba($color, .25)
  &:hover,
  &:focus,
  &:active
    $button-color: rgba($color, .25)
    background-color: $button-color
    border-color: $border-color
  &.is-disabled,
  &:disabled
    color: rgba($text-color, .4)
    border-color: shade($color, 6%)
    pointer-events: none


=button-size($font-size: 1rem, $horizontal: .75, $vertical: .625)
  font-size: $font-size
  padding-inline: #{strip_unit($horizontal * $font-size)}em
  @if unitless_number($vertical)
    height: #{strip_unit(($font-size * 1.4) + (($vertical * $font-size) * 2))}em
  @else
    height: $vertical
  &.is-icon
    padding-inline: #{strip_unit($horizontal * $font-size * 1)}em
  &.is-select
    padding-inline: 0
    +position(relative)
    &::before
      +fa(fas "\f0d7")
      +size(2em 100%)
      +position(absolute, right 0, top 0, bottom 0)
      +text-block(1em 1, flex)
      color: var(--muted-text)
      align-items: center
      justify-content: center
    select
      padding-left: 1em
      padding-right: 2em
      +position(relative, 1)
  &.is-checkbox
    padding-left: 2.75em
