.button
  +flex(space-between, center)
  border-radius: 30px
  padding: 10px 25px
  transition: background 0.3s
  box-sizing: border-box
  font-size: 16px


  &.white
    background: white
    color: $fontBlue

    span
      +arrowRightBlue()

    &:hover
      background: darken(white, 5%)

    &:active
      background: darken(white, 10%)

  &.green
    background: $defaultGreen
    color: white

    span
      +arrowRightWhite()

    &:hover
      background: darken($defaultGreen, 8%)

    &:active
      background: darken($defaultGreen, 14%)

  &.blue
    background: lighten($fontBlue, 5%)
    color: white

    span
      +arrowRightWhite()

    &:hover
      background: darken($fontBlue, 7.5%)

    &:active
      background: darken($fontBlue, 12%)

  &.red
    background: $defaultRed
    color: white

    span
      +arrowRightWhite()

    &:hover
      background: darken($defaultRed, 7.5%)

    &:active
      background: darken($defaultRed, 12%)