bulma/sass/elements/button.sass

$button-color: $text-strong !default
$button-color-invert: $white !default
$button-background-color: $scheme-main !default
$button-family: false !default

$button-border-color: $border !default
$button-border-width: $control-border-width !default

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

$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default

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

$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default

$button-text-color: $text !default
$button-text-decoration: underline !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-text-focus-background-color: $border-light !default
$button-text-focus-border-color: $border !default
$button-text-focus-color: $text-strong !default
$button-text-focus-box-shadow-color: $border-light !default
$button-text-active-background-color: $border-light !default
$button-text-active-color: $text-strong !default

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

$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default

// 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)
      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
      margin-right: $button-padding-horizontal / 4
    &:last-child:not(:first-child)
      margin-left: $button-padding-horizontal / 4
      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
    &:first-child:last-child
      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
      margin-right: calc(#{-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: $button-text-decoration
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused
      background-color: $button-text-hover-background-color
      color: $button-text-hover-color
    &:active,
    &.is-active
      background-color: bulmaDarken($button-text-hover-background-color, 5%)
      color: $button-text-hover-color
    &[disabled],
    fieldset[disabled] &
      background-color: transparent
      border-color: transparent
      box-shadow: none
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      border-color: transparent
      color: $color-invert
      &:hover,
      &.is-hovered
        background-color: bulmaDarken($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 bulmaRgba($color, 0.25)
      &:active,
      &.is-active
        background-color: bulmaDarken($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: bulmaDarken($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: nth($pair, 3)
        $color-dark: nth($pair, 4)
        &.is-light
          background-color: $color-light
          color: $color-dark
          &:hover,
          &.is-hovered
            background-color: bulmaDarken($color-light, 2.5%)
            border-color: transparent
            color: $color-dark
          &:active,
          &.is-active
            background-color: bulmaDarken($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(#{$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)
      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
        margin-right: -1px
      &:last-child
        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

.vbuttons
  align-items: center
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  &:not(:last-child)
    margin-bottom: 1rem
  .vbutton
    margin-right: 1em

.vbutton
  --background-color: #{$button-background-color}
  --border-color: #{$button-border-color}
  --color: #{$button-color}
  --hover-border-color: #{$button-hover-border-color}
  --hover-color: #{$button-hover-color}
  --focus-border-color: #{$button-focus-border-color}
  --focus-color: #{$button-focus-color}
  --focus-box-shadow-color: #{$button-focus-box-shadow-color}
  --active-border-color: #{$button-active-border-color}
  --active-color: #{$button-active-color}
  --outlined-color: #{$button-color}
  --outlined-hover-background-color: #{$button-color}
  --outlined-hover-color: #{$button-color-invert}
  --outlined-active-background-color: #{darken($button-color, 5%)}
  --outlined-active-color: #{$button-color-invert}
  --outlined-focus-box-shadow-color: #{$border}
  @extend %control
  @extend %unselectable
  background-color: var(--background-color)
  border-color: var(--border-color)
  border-width: $button-border-width
  color: var(--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)
      margin-left: calc(-0.375em - #{$button-border-width})
      margin-right: 0.1875em
    &:last-child:not(:first-child)
      margin-left: 0.1875em
      margin-right: calc(-0.375em - #{$button-border-width})
    &:first-child:last-child
      margin-left: calc(-0.375em - #{$button-border-width})
      margin-right: calc(-0.375em - #{$button-border-width})
  &:hover,
  &.is-hovered
    background-color: var(--hover-background-color)
    border-color: var(--hover-border-color)
    color: var(--hover-color)
  &:focus,
  &.is-focused
    border-color: var(--focus-border-color)
    &:not(:active)
      box-shadow: $button-focus-box-shadow-size #{var(--focus-box-shadow-color)}
  &:active,
  &.is-active
    background-color: var(--active-background-color)
    border-color: var(--active-border-color)
    color: var(--active-color)
  &.is-outlined
    --background-color: transparent
    --border-color: #{$button-color}
    --color: #{$button-color}
    --hover-background-color: #{$button-color}
    --hover-color: #{$button-color-invert}
    --active-background-color: #{darken($button-color, 5%)}
    --active-color: #{$button-color-invert}
    --focus-border-color: #{$button-color}
    --focus-box-shadow-color: #{$border}
    &:not(:hover):not(.is-hovered):not(:active):not(.is-active)
      background-color: transparent
    &:not(.is-inverted):not([disabled])
      &:hover,
      &.is-hovered,
      &:active,
      &.is-active
        border-color: transparent
  &.is-outlined.is-inverted
    background-color: transparent
  &.is-text
    --background-color: transparent
    --border-color: transparent
    --color: #{$text}
    --hover-background-color: #{$button-text-hover-background-color}
    --hover-border-color: transparent
    --hover-color: #{$button-text-hover-color}
    --focus-background-color: #{$button-text-focus-background-color}
    --focus-border-color: transparent
    --focus-border-color: #{$button-text-focus-border-color}
    --focus-color: #{$button-text-focus-color}
    --focus-box-shadow-color: #{$button-text-focus-box-shadow-color}
    --active-background-color: #{$button-text-active-background-color}
    --active-border-color: transparent
    --active-color: #{$button-text-active-color}
    text-decoration: underline
  @each $name, $trio in $colors
    $base: "#{$prefix}#{$name}"
    &.is-#{$name}
      --background-color: var(--#{$base})
      --border-color: transparent
      --color: var(--#{$base}-invert)
      --hover-background-color: var(--#{$base}-hover)
      --hover-border-color: transparent
      --hover-color: var(--#{$base}-invert)
      --focus-background-color: var(--#{$base})
      --focus-border-color: transparent
      --focus-color: var(--#{$base}-invert)
      --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
      --active-background-color: var(--#{$base}-active)
      --active-border-color: transparent
      --active-color: var(--#{$base}-invert)
      --outlined-color: var(--#{$base})
      &.is-inverted
        --background-color: var(--#{$base}-invert)
        --color: var(--#{$base})
        --hover-background-color: var(--#{$base}-invert)
        --hover-color: var(--#{$base}-hover)
        --active-background-color: var(--#{$base}-invert)
        --active-color: var(--#{$base}-active)
      &.is-outlined
        --background-color: transparent
        --border-color: var(--#{$base})
        --color: var(--#{$base})
        --hover-background-color: var(--#{$base})
        --focus-border-color: var(--#{$base})
      &.is-outlined.is-inverted
        --background-color: transparent
        --border-color: var(--#{$base}-invert)
        --color: var(--#{$base}-invert)
        --hover-border-color: var(--#{$base}-hover)
        --hover-color: var(--#{$base}-invert)
        --active-border-color: var(--#{$base}-active)
        --active-color: var(--#{$base}-active)
        --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 14%)
      &.is-light
        --background-color: var(--#{$base}-light)
        --border-color: transparent
        --color: var(--#{$base}-dark)
        --hover-background-color: var(--#{$base}-light-hover)
        --hover-border-color: transparent
        --hover-color: var(--#{$base}-dark)
        --focus-background-color: var(--#{$base}-light)
        --focus-border-color: transparent
        --focus-color: var(--#{$base}-dark)
        --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
        --active-background-color: var(--#{$base}-light-active)
        --active-border-color: transparent
        --active-color: var(--#{$base}-dark)
  // Sizes
  &.is-small
    +button-small
  &.is-normal
    +button-normal
  &.is-medium
    +button-medium
  &.is-large
    +button-large
  // Modifiers
  &[disabled],
  fieldset[disabled] &
    --hover-background-color: var(--background-color) !important
    --hover-border-color: var(--border-color) !important
    --hover-color: var(--color) !important
    opacity: $button-disabled-opacity
  &.is-fullwidth
    display: flex
    width: 100%
  &.is-loading
    color: transparent !important
    pointer-events: none
    &::after
      @extend %loader
      +center(1em)
      border-color: transparent transparent var(--color) var(--color) !important
      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: 1.25em
    padding-right: 1.25em