@keyframes progress {
    0% { background-position: -12px 0 }
    to { background-position: 0 0 }
}

button,
.button
  display: inline-block
  text-align: center
  color: #000
  background-color: #fff
  border: 1px solid #ccc
  border-radius: 4px
  padding: 6px 24px 6px
  margin: 0
  box-sizing: border-box
  outline: none
  cursor: pointer

  &.full-width
    width: 100%

  &:active
    background: #f8f8f8

  &[disabled],
  &[disabled]:active,
  &.highlighted[disabled],
  &.highlighted[disabled]:active
    color: #999
    background: #e1e1e1
    border-color: #e1e1e1
    cursor: default

  &.busy,
  &.busy[disabled],
  &.busy[disabled]:active,
  &.highlighted.busy,
  &.highlighted.busy[disabled],
  &.highlighted.busy[disabled]:active
    color: #000
    background: repeating-linear-gradient(-45deg, #ffd426, #ffd426 4px, #f7c600 4px, #f7c600 8px)
    border: none
    padding: 7px 25px 7px
    animation: progress .5s linear infinite

  &.highlighted
    background: #ffdb4d
    border-color: #ffdb4d

    &:active
      background: #e6c648

  &.transparent

    &, &:active, &[disabled], &.busy, &.busy[disabled]
      color: #03c
      background-color: transparent
      border: none
      padding: 7px 12px 7px

    &:hover
      text-decoration: underline

a.button

  &, &:hover, &:visited
    color: #000
    text-decoration: none

label.button input
  display: none
