=normal-button-color($color, $root-color: true)
  background-color: $color
  background-image: linear-gradient(to bottom, tint($color, 6%) 0%, shade($color, 6%) 100%)
  border-style: solid
  border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
  @if $root-color
    color: luma_contrast_color($color)
    text-shadow: if(luma_bright($color), lighten($color, 18%) 0 1px 0, darken($color, 18%) 0 -1px 0)
    &:hover,
    &.hover,
    &.is-hover,
    &:active,
    &.active,
    &.is-active
      color: luma_contrast_color($color)

=normal-button($color: blue)
  transition: .5s (background-image)
  +normal-button-color($color)
  box-shadow: tint($color, 32%) 0 1px 0 inset, shade($color, 26%) 0 1px 0, rgba(black, .15) 0 2px 1px
  &:hover,
  &.hover,
  &.is-hover
    @if luma($color) > 90
      +normal-button-color(lighten(#f2f2f2, 5%), false)
    @else
      +normal-button-color(lighten($color, 5%), false)
  &:active,
  &.active,
  &.is-active
    +top(1px)
    @if luma($color) > 90
      $color: lighten(#f2f2f2, 7%)
      +normal-button-color($color, false)
      box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
    @else
      $color: lighten($color, 7%)
      +normal-button-color($color, false)
      box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px

  // radio & checkbos
  &.is-radio,
  &.is-checkbox
    &:before
      box-shadow: rgba(black, 0.2) 0 1px 1px inset
      background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}

  // checked
  &.is-checked
    color: luma_contrast_color($button-checked-color)
    +normal-button-color($button-checked-color, true)
    border-color: shade($button-checked-color, 10%) shade($button-checked-color, 16%) shade($button-checked-color, 26%)
    box-shadow: darken($button-checked-color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
    +top(1px)
    &:before
      box-shadow: rgba(black, 0.2) 0 1px 1px inset
      background-color: #{if(luma_bright($button-checked-color), tint($button-checked-color, 20%), shade($button-checked-color, 20%))}

  // select
  &.is-select
    &:after
      color: rgba(luma_contrast_color($color), .7)
      border-left: 1px solid
      border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}

  // disabled
  &.is-disabled,
  &:disabled
    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
    background-color: rgba($color, 7)
    background-image: none 
    color: rgba(luma_contrast_color($color), .7)
    border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
    text-shadow: none
    box-shadow: none