.o-button
  cursor: pointer
  border: none!important
  white-space: nowrap
  display: inline-block
  height: 40px
  line-height: 40px
  padding: 0 14px
  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)
  background: #fff
  border-radius: 4px
  font-size: 15px
  font-weight: 600
  text-transform: uppercase
  letter-spacing: .025em
  text-align: center
  &--primary
    color: #fff
    background: #007bff
  &--success
    color: #fff
    background: #28a745
  &--danger
    color: #fff
    background: #dc3545
  &--warning
    color: white
    background: #e4ac03
  &--simple
    text-transform: initial
    box-shadow: none
    color: black
    background: transparent
  &--gradientGreen
    color: white!important
    +background-gradient(#00c3b5, #1fdea6)
  &--gradientBlue
    color: white!important
    +background-gradient(#1E90FF, #00BFFF)

  &--xs
    padding: 0 8px
    height: 24px
    line-height: 24px
    font-size: .7rem
  &--sm
    padding: 0 14px
    height: 30px
    line-height: 30px
    font-size: .8rem
  &--md
    padding: 0 12px
    height: 36px
    line-height: 36px
    font-size: .9rem

  &--xl
    height: 55px
    line-height: 55px
    padding: 0 35px
    font-size: 20px
    border-radius: .4rem

  &--capitalize
    text-transform: initial

  &--animated
    transition: transform ease-in-out 75ms
    &:hover
      transform: scale(1.07)
    &:focus
      transform: scale(.98)

  &--hidden
    display: none

a.o-button
  &:hover
    text-decoration: none
    color: white

  &--simple:hover
    color: initial
