$button-color ?= $text-strong
$button-background-color ?= $scheme-main
$button-family ?= false

$button-border-color ?= $border
$button-border-width ?= $control-border-width

$button-padding-vertical ?= "calc(0.5em - %s)" % $button-border-width
$button-padding-horizontal ?= 1em

$button-hover-color ?= $link-hover
$button-hover-border-color ?= $link-hover-border

$button-focus-color ?= $link-focus
$button-focus-border-color ?= $link-focus-border
$button-focus-box-shadow-size ?= 0 0 0 0.125em
$button-focus-box-shadow-color ?= rgba($link, 0.25)

$button-active-color ?= $link-active
$button-active-border-color ?= $link-active-border

$button-text-color ?= $text
$button-text-decoration ?= underline
$button-text-hover-background-color ?= $background
$button-text-hover-color ?= $text-strong

$button-disabled-background-color ?= $scheme-main
$button-disabled-border-color ?= $border
$button-disabled-shadow ?= none
$button-disabled-opacity ?= 0.5

$button-static-color ?= $text-light
$button-static-background-color ?= $scheme-main-ter
$button-static-border-color ?= $border

$button-colors ?= $colors

// The button sizes use mixins so they can be used at different breakpoints
button-small()
  border-radius $radius-small
  font-size $size-small
button-normal()
  font-size $size-normal
button-medium()
  font-size $size-medium
button-large()
  font-size $size-large

.button
  @extend $control
  @extend $unselectable
  background-color $button-background-color
  border-color $button-border-color
  border-width $button-border-width
  color $button-color
  cursor pointer
  if $button-family
    font-family $button-family
  justify-content center
  padding-bottom $button-padding-vertical
  padding-left $button-padding-horizontal
  padding-right $button-padding-horizontal
  padding-top $button-padding-vertical
  text-align center
  white-space nowrap
  strong
    color inherit
  .icon
    &,
    &.is-small,
    &.is-medium,
    &.is-large
      height 1.5em
      width 1.5em
    &:first-child:not(:last-child)
      ltr-property("margin", "calc(%s - %s)" % (-1 / 2 * $button-padding-horizontal $button-border-width), false)
      ltr-property("margin", ($button-padding-horizontal / 4))
    &:last-child:not(:first-child)
      ltr-property("margin", ($button-padding-horizontal / 4), false)
      ltr-property("margin", "calc(%s - %s)" % (-1 / 2 * $button-padding-horizontal $button-border-width))
    &:first-child:last-child
      margin-left "calc(%s - %s)" % (-1 / 2 * $button-padding-horizontal $button-border-width)
      margin-right "calc(%s - %s)" % (-1 / 2 * $button-padding-horizontal $button-border-width)
  // States
  &:hover,
  &.is-hovered
    border-color $button-hover-border-color
    color $button-hover-color
  &:focus,
  &.is-focused
    border-color $button-focus-border-color
    color $button-focus-color
    &:not(:active)
      box-shadow $button-focus-box-shadow-size $button-focus-box-shadow-color
  &:active,
  &.is-active
    border-color $button-active-border-color
    color $button-active-color
  // Colors
  &.is-text
    background-color transparent
    border-color transparent
    color $button-text-color
    text-decoration underline
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused
      background-color $button-text-hover-background-color
      color $button-text-hover-color
    &:active,
    &.is-active
      background-color bulma-stylus-darken($button-text-hover-background-color, 5%)
      color $button-text-hover-color
    &[disabled],
    fieldset[disabled] &
      background-color transparent
      border-color transparent
      box-shadow none
  for $name, $pair in $button-colors
    $color = $pair['1']
    $color-invert = $pair['2']
    &.is-{$name}
      background-color $color
      border-color transparent
      color $color-invert
      &:hover,
      &.is-hovered
        background-color bulma-stylus-darken($color, 2.5%)
        border-color transparent
        color $color-invert
      &:focus,
      &.is-focused
        border-color transparent
        color $color-invert
        &:not(:active)
          box-shadow $button-focus-box-shadow-size rgba($color, 0.25)
      &:active,
      &.is-active
        background-color bulma-stylus-darken($color, 5%)
        border-color transparent
        color $color-invert
      &[disabled],
      fieldset[disabled] &
        background-color $color
        border-color transparent
        box-shadow none
      &.is-inverted
        background-color $color-invert
        color $color
        &:hover,
        &.is-hovered
          background-color bulma-stylus-darken($color-invert, 5%)
        &[disabled],
        fieldset[disabled] &
          background-color $color-invert
          border-color transparent
          box-shadow none
          color $color
      &.is-loading
        &::after
          border-color transparent transparent $color-invert $color-invert !important
      &.is-outlined
        background-color transparent
        border-color $color
        color $color
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused
          background-color $color
          border-color $color
          color $color-invert
        &.is-loading
          &::after
            border-color transparent transparent $color $color !important
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused
            &::after
              border-color transparent transparent $color-invert $color-invert !important
        &[disabled],
        fieldset[disabled] &
          background-color transparent
          border-color $color
          box-shadow none
          color $color
      &.is-inverted.is-outlined
        background-color transparent
        border-color $color-invert
        color $color-invert
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused
          background-color $color-invert
          color $color
        &.is-loading
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused
            &::after
              border-color transparent transparent $color $color !important
        &[disabled],
        fieldset[disabled] &
          background-color transparent
          border-color $color-invert
          box-shadow none
          color $color-invert
      // If light and dark colors are provided
      if length($pair) >= 4
        $color-light = $pair['3']
        $color-dark = $pair['4']
        &.is-light
          background-color $color-light
          color $color-dark
          &:hover,
          &.is-hovered
            background-color bulma-stylus-darken($color-light, 2.5%)
            border-color transparent
            color $color-dark
          &:active,
          &.is-active
            background-color bulma-stylus-darken($color-light, 5%)
            border-color transparent
            color $color-dark
  // Sizes
  &.is-small
    button-small()
  &.is-normal
    button-normal()
  &.is-medium
    button-medium()
  &.is-large
    button-large()
  // Modifiers
  &[disabled],
  fieldset[disabled] &
    background-color $button-disabled-background-color
    border-color $button-disabled-border-color
    box-shadow $button-disabled-shadow
    opacity $button-disabled-opacity
  &.is-fullwidth
    display flex
    width 100%
  &.is-loading
    color transparent !important
    pointer-events none
    &::after
      @extend $loader
      center(1em)
      position absolute !important
  &.is-static
    background-color $button-static-background-color
    border-color $button-static-border-color
    color $button-static-color
    box-shadow none
    pointer-events none
  &.is-rounded
    border-radius $radius-rounded
    padding-left "calc(%s + 0.25em)" % $button-padding-horizontal
    padding-right "calc(%s + 0.25em)" % $button-padding-horizontal

.buttons
  align-items center
  display flex
  flex-wrap wrap
  justify-content flex-start
  .button
    margin-bottom 0.5rem
    &:not(:last-child):not(.is-fullwidth)
      ltr-property("margin", 0.5rem)
  &:last-child
    margin-bottom -0.5rem
  &:not(:last-child)
    margin-bottom 1rem
  // Sizes
  &.are-small
    .button:not(.is-normal):not(.is-medium):not(.is-large)
      button-small()
  &.are-medium
    .button:not(.is-small):not(.is-normal):not(.is-large)
      button-medium()
  &.are-large
    .button:not(.is-small):not(.is-normal):not(.is-medium)
      button-large()
  &.has-addons
    .button
      &:not(:first-child)
        border-bottom-left-radius 0
        border-top-left-radius 0
      &:not(:last-child)
        border-bottom-right-radius 0
        border-top-right-radius 0
        ltr-property("margin", -1px)
      &:last-child
        ltr-property("margin", 0)
      &:hover,
      &.is-hovered
        z-index 2
      &:focus,
      &.is-focused,
      &:active,
      &.is-active,
      &.is-selected
        z-index 3
        &:hover
          z-index 4
      &.is-expanded
        flex-grow 1
        flex-shrink 1
  &.is-centered
    justify-content center
    &:not(.has-addons)
      .button:not(.is-fullwidth)
        margin-left 0.25rem
        margin-right 0.25rem
  &.is-right
    justify-content flex-end
    &:not(.has-addons)
      .button:not(.is-fullwidth)
        margin-left 0.25rem
        margin-right 0.25rem