@import variables
@import mixins

a.btn
  text-decoration: none

.btn
  +appearance
  font-size: size('medium')
  font-weight: normal
  cursor: pointer
  display: inline-block
  border-radius: 2px
  padding: 3px 10px
  margin: 0
  border: 1px solid button-border-color('default')
  background: button-bg-color('default')
  color: button-color('default')
  &:hover, &:focus
    border-color: button-hover-border-color('default')
    background: button-hover-bg-color('default')
    color: button-hover-color('default')

.btn-red
  border-color: button-border-color('red')
  background: button-bg-color('red')
  color: button-color('red')
  &:hover, &:focus
    border-color: button-hover-border-color('red')
    background: button-hover-bg-color('red')
    color: button-hover-color('red')

.btn-blue
  border-color: button-border-color('blue')
  background: button-bg-color('blue')
  color: button-color('blue')
  &:hover, &:focus
    border-color: button-hover-border-color('blue')
    background: button-hover-bg-color('blue')
    color: button-hover-color('blue')

.btn:disabled
  color: button-color('disabled')
  border-color: button-border-color('disabled')
  background: button-bg-color('disabled')

.buttons-header
  font-size: size('small')
  margin-top: 5px
  margin-bottom: 15px