.button
  position: relative
  display: inline-block
  padding: $padding multiple($padding, 2)
  margin-bottom: $margin
  border-radius: $border-radius
  text-decoration: none
  font-weight: lighter
  text-align: center
  font-size: $font-default
  line-height: 1.25em
  border-width: 1px
  border-style: solid
  color: $white
  background-clip: border-box
  outline-offset: 1px
  outline-width: 3px
  outline-color: $darkBlue
  cursor: pointer
  _icon-color: $white
  .icon:first-child:not(:last-child)
    margin-{$start-direction}: multiple($padding, -1/2)
    margin-{$end-direction}: multiple($padding, 1/2)
  .icon:last-child:not(:last-child)
    margin-{$start-direction}: multiple($padding, 1/2)
    margin-{$end-direction}: multiple($padding, -1/2)
  span
    line-height: inherit
  .icon:only-child
    margin: 0 multiple($padding, -1)
  &:hover
    text-decoration: none

  .label
    margin: multiple($padding, -1) 0
    margin-{$start-direction}: $padding
    margin-{$end-direction}: multiple($padding, -1)

  /**
   * modiffers
   */
  &.is-inverse
    border-width: 1px

  &.is-block
    width: 100%
  &.is-tiny
    font-size: $font-small
    padding: 5px
  &.is-small
    font-size: $font-small
  &.is-large
    font-size: $font-large

  &.is-rounded
    border-radius: 10em
    border-width: 1px

  &.is-embossed
    box-shadow: inset 0 -2px 0 $shadow
    &:focus
      box-shadow: inset 0 2px 0 $shadow

  &.is-floating
    box-shadow: 0 4px 6px -3px $shadow
    &:focus
      box-shadow: 0 2px 2px -3px $shadow
    &.is-embossed
      box-shadow: inset 0 -2px 0 $shadow, 0 4px 6px -3px $shadow
      &:focus
        box-shadow: inset 0 2px 0 $shadow, 0 2px 2px -3px $shadow

  &
  &.is-default
    background-color: $mainColor
    border-color: $mainColor
    &:hover
    &:focus
      text-decoration: none
      background-color: $lightBlack
    &.is-inverse
      background-color: transparent
      color: $black
      &:hover
      &:focus
        border-color: $lightBlack

  &.is-white
    background-color: $white
    border-color: $white
    color: $black
    &:hover
    &:focus
      background-color: $black
      color: $white
    &.is-inverse
      background-color: transparent
      color: $white
      &:hover
      &:focus
        background-color: $black
        color: $white


  &.is-primary
  &.is-blue
    background-color: $blue
    border-color: $blue
    &:hover
    &:focus
      background-color: $darkBlue
    &.is-inverse
      background-color: transparent
      color: $blue
      _icon-color: $blue
      &:hover
      &:focus
        border-color: $darkBlue

  &.is-error
  &.is-red
    background-color: $red
    border-color: $red
    &:hover
    &:focus
      background-color: $darkRed
    &.is-inverse
      background-color: transparent
      color: $red
      _icon-color: $red
      &:hover
      &:focus
        border-color: $darkRed

  &.is-success
  &.is-green
    background-color: $green
    border-color: $green
    &:hover
    &:focus
      background-color: $darkGreen
    &.is-inverse
      background-color: transparent
      color: $green
      _icon-color: $green
      &:hover
      &:focus
        border-color: $darkGreen

  &.is-disabled
  &[disabled]
    background-color: $gray
    border-color: $gray
    color: $transWhite
    opacity: 0.75
    cursor: not-allowed
    _icon-color: $transWhite
    &:hover
    &:focus
      background-color: $gray
      border-color: $gray
    &.is-inverse
      background-color: transparent
      color: $transGray
      _icon-color: $transGray