$button-color: v("text-strong") !default
$button-background-color: v("scheme-main") !default
$button-family: inherit !default

$button-border-color: v("border") !default
$button-border-width: v("control-border-width") !default

+register(button-border-width, $button-border-width, true)

$button-padding-vertical: calc(0.5em - #{v("button-border-width")}) !default
$button-padding-horizontal: 1em !default

$button-hover-color: v("link-hover") !default
$button-hover-border-color: v("link-hover-border") !default

$button-focus-color: v("link-focus") !default
$button-focus-border-color: v("link-focus-border") !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: vAlphaChange("link", 0.25) !default

$button-active-color: v("link-active") !default
$button-active-border-color: v("link-active-border") !default

$button-text-color: v("text") !default
$button-text-decoration: underline !default
$button-text-hover-background-color: v("background") !default
$button-text-hover-color: v("text-strong") !default

$button-disabled-background-color: v("scheme-main") !default
$button-disabled-border-color: v("border") !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default

$button-static-color: v("text-light") !default
$button-static-background-color: v("scheme-main-ter") !default
$button-static-border-color: v("border") !default

+register(button-background-color, $button-background-color, true)
+register(button-border-color, $button-border-color, true)
+register(button-color, $button-color, true)
+register(button-padding-vertical, $button-padding-vertical, true)
+register(button-padding-horizontal, $button-padding-horizontal, true)
+register(button-hover-border-color, $button-hover-border-color, true)
+register(button-hover-color, $button-hover-color, true)
+register(button-focus-border-color, $button-focus-border-color, true)
+register(button-focus-color, $button-focus-color, true)
+register(button-focus-box-shadow-size, $button-focus-box-shadow-size, true)
+register(button-focus-box-shadow-color, $button-focus-box-shadow-color, true)
+register(button-active-border-color, $button-active-border-color, true)
+register(button-active-color, $button-active-color, true)
+register(button-text-color, $button-text-color, true)
+register(button-text-decoration, $button-text-decoration, true)
+register(button-text-hover-background-color, $button-text-hover-background-color, true)
+register(button-text-hover-color, $button-text-hover-color, true)
+register(button-disabled-background-color, $button-disabled-background-color, true)
+register(button-disabled-border-color, $button-disabled-border-color, true)
+register(button-disabled-shadow, $button-disabled-shadow, true)
+register(button-disabled-opacity, $button-disabled-opacity, true)
+register(button-static-background-color, $button-static-background-color, true)
+register(button-static-border-color, $button-static-border-color, true)
+register(button-static-color, $button-static-color, true)
+register(button-family, $button-family, true)

// The button sizes use mixins so they can be used at different breakpoints
=button-small
  border-radius: v("radius-small")
  font-size: v("size-small")

=button-normal
  font-size: v("size-normal")

=button-medium
  font-size: v("size-medium")

=button-large
  font-size: v("size-large")

.button
  @extend %control
  @extend %unselectable
  background-color: v("button-background-color")
  border-color: v("button-border-color")
  border-width: v("button-border-width")
  color: v("button-color")
  cursor: pointer
  font-family: v("button-family")
  justify-content: center
  padding: v("button-padding-vertical") v("button-padding-horizontal")
  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-left", calc(-1 / 2 * #{v("button-padding-horizontal")} - #{v("button-border-width")}))
      +ltr-property("margin-right", calc(#{v("button-padding-horizontal")} / 4))

    &:last-child:not(:first-child)
      +ltr-property("margin-left", calc(#{v("button-padding-horizontal")} / 4))
      +ltr-property("margin-right", calc(-1 / 2 * #{v("button-padding-horizontal")} - #{v("button-border-width")}))

    &:first-child:last-child
      margin-left: calc(-1 / 2 * #{v("button-padding-horizontal")} - #{v("button-border-width")})
      margin-right: calc(-1 / 2 * #{v("button-padding-horizontal")} - #{v("button-border-width")})
  // States
  &:hover,
  &.is-hovered
    border-color: v("button-hover-border-color")
    color: v("button-hover-color")

  &:focus,
  &.is-focused
    border-color: v("button-focus-border-color")
    color: v("button-focus-color")

    &:not(:active)
      box-shadow: v("button-focus-box-shadow-size") v("button-focus-box-shadow-color")

  &:active,
  &.is-active
    border-color: v("button-active-border-color")
    color: v("button-active-color")
  // Colors
  &.is-text
    background-color: transparent
    border-color: transparent
    color: v("button-text-color")
    text-decoration: v("button-text-decoration")

    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused
      background-color: v("button-text-hover-background-color")
      color: v("button-text-hover-color")

    &:active,
    &.is-active
      background-color: vDarken("button-text-hover-background-color", 5%)
      color: v("button-text-hover-color")

    &[disabled],
    fieldset[disabled] &
      background-color: transparent
      border-color: transparent
      box-shadow: none

  @each $name in $colors-list
    $color: v($name)
    $color-invert: v($name+"-invert")
    &.is-#{$name}
      background-color: $color
      border-color: transparent
      color: $color-invert

      &:hover,
      &.is-hovered
        background-color: vDarken($name, 2.5%)
        border-color: transparent
        color: $color-invert

      &:focus,
      &.is-focused
        border-color: transparent
        color: $color-invert

        &:not(:active)
          box-shadow: v("button-focus-box-shadow-size") vAlphaChange($name, 0.25)

      &:active,
      &.is-active
        background-color: vDarken($name, 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: vDarken($name+'-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 isRegistered($name+"-dark")
        $color-light: v($name+"-light")
        $color-dark: v($name+"-dark")
        &.is-light
          background-color: $color-light
          color: $color-dark

          &:hover,
          &.is-hovered
            background-color: vDarken($name+'-light', 2.5%)
            border-color: transparent
            color: $color-dark

          &:active,
          &.is-active
            background-color: vDarken($name+'-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: v("button-disabled-background-color")
    border-color: v("button-disabled-border-color")
    box-shadow: v("button-disabled-shadow")
    opacity: v("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: v("button-static-background-color")
    border-color: v("button-static-border-color")
    color: v("button-static-color")
    box-shadow: none
    pointer-events: none

  &.is-rounded
    border-radius: v("radius-rounded")
    padding-left: calc(#{v("button-padding-horizontal")} + 0.25em)
    padding-right: calc(#{$button-padding-horizontal} + 0.25em)

.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-right", 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-right", -1px)
      &:last-child
        +ltr-property("margin-right", 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