$btn--base
  @extend .brdr--rounded
  padding: ($padding / 2) $padding
  border: 2px solid #ccc
  color: $font-color
  text-decoration: none
  text-align: center
  background: transparent
.btn
  @extend $btn--base
  &:hover,
  &:focus,
  &:active
    background-color: rgba(0, 0, 0, 0.05)
    color: darken($font-color, 20%)
.btn--link
  @extend $btn--base
  border-color: transparent
  color: $link-color
  &:hover
    background-color: transparent
    color: darken($link-color, 15%)
.btn--blue
  @extend $btn--base
  border-color: darken($blue, 3%)
  background-color: $blue
  color: $white
  &:hover,
  &:focus,
  &:active
    color: $white
    background-color: darken($blue, 10%)
.btn--green
  @extend $btn--base
  border-color: darken($green, 4%)
  background-color: $green
  color: $white
  &:hover,
  &:focus,
  &:active
    color: $white
    background-color: darken($green, 10%)
.btn--gray
  @extend $btn--base
  border-color: darken($dark-gray, 5%)
  background-color: $dark-gray
  color: $white
  &:hover,
  &:focus,
  &:active
    color: $white
    background-color: darken($dark-gray, 10%)
.btn--red
  @extend $btn--base
  border-color: darken($red, 5%)
  background-color: $red
  color: $white
  &:hover,
  &:focus,
  &:active
    color: $white
    background-color: darken($red, 10%)
.btn--s
  @extend .small
  padding: ($padding / 2)