/*
 *
 * BUI: BUTTONS
 *
 */

.bui-action-button
  border: none
  outline: none
  line-height: 15px
  font-size: 13px
  font-weight: 600
  text-transform: uppercase
  padding: 12px 18px
  min-width: 64px
  max-width: 100%
  overflow: hidden
  text-overflow: ellipsis
  vertical-align: top
  display: inline-block
  text-align: center
  white-space: nowrap
  cursor: pointer
  border-radius: 4px
  box-shadow: 0 2px 8px rgba(black, .125)
  @include transition(box-shadow .075s ease, background-color .085s ease)
  &:hover
    box-shadow: 0 2px 10px rgba(black, .25)
  &:active
    box-shadow: 0 0 10px rgba(black, .1)

  &.bui-is-primary
    color: white
    background-color: $amber-A400

  &.bui-is-secondary
    color: white
    background-color: $cyan-500

  &.bui-is-flat
    box-shadow: none
    background-color: transparent

    &.bui-is-primary
      color: $amber-A400
      &:hover
        background-color: rgba($amber-A400, .125)
      &:active
        background-color: rgba($amber-A400, .25)

    &.bui-is-secondary
      color: $cyan-500
      &:hover
        background-color: rgba($cyan-500, .125)
      &:active
        background-color: rgba($cyan-500, .25)

  &.bui-is-toggle
    color: $grey-600
    background-color: rgba($grey-600, .0)
    box-shadow: none
    &.bui-is-selected
      color: $grey-800
      background-color: rgba($grey-600, .1)
    &:hover
      background-color: rgba($grey-600, .2)
    &:active
      background-color: rgba($grey-600, .3)