@import variables

// buttons

.btn
  @include appearance(none)
  background: transparent
  border-radius: $radius
  border: $border-width solid $gray
  box-shadow: none
  color: $gray
  cursor: pointer
  display: inline-block
  font-size: 1.05em
  height: auto
  line-height: 1
  margin: 0
  outline: none
  padding: 0.76em 1.5em
  text-align: center
  text-decoration: none
  user-select: none
  white-space: nowrap
  &:hover
    border-color: $gray
  &.solid, &:hover
    color: $white
    background: $gray

  // colors

  &.white
    color: $white
    border-color: $white
    &.solid, &:hover
      color: $black
      background: $white
  &.gray-light
    color: $gray-light
    border-color: $gray-light
    &.solid, &:hover
      color: $gray
      background: $gray-light
  &.gray-dark
    color: $gray-dark
    border-color: $gray-dark
    &.solid, &:hover
      color: $white
      background: $gray-dark
  &.black
    color: $black
    border-color: $black
    &.solid, &:hover
      color: $white
      background: $black
  &.red
    color: $red
    border-color: $red
    &.solid, &:hover
      color: $white
      background: $red
  &.orange
    color: $orange
    border-color: $orange
    &.solid, &:hover
      color: $white
      background: $orange
  &.yellow
    color: $yellow
    border-color: $yellow
    &.solid, &:hover
      color: $white
      background: $yellow
  &.blue
    color: $blue
    border-color: $blue
    &.solid, &:hover
      color: $white
      background: $blue
  &.green
    color: $green
    border-color: $green
    &.solid, &:hover
      color: $white
      background: $green

  // solids

  &.solid
    &:hover, &:active
      opacity: 0.8

  // no outline

  &.no-outline
    border-color: transparent

  // sizes

  &.large
    font-size: 1.2em
    padding: 0.8em 1.7em
    word-wrap: normal
  &.small
    padding: 0.5em 0.9em
    font-size: 0.9em
  &.tiny
    padding: 0.3em 0.8em
    font-size: 0.8em

  // shapes

  &.round
    border-radius: $round

  // states

  &:hover
    transition: $all
    opacity: 0.8

  &:disabled, &.disabled, &:disabled:hover, &.disabled:hover
    cursor: default
    background-color: $gray-light !important
    border-color: $gray-light !important
    color: $gray !important
    opacity: 0.2

// Adjustments for Firefox

@-moz-document url-prefix()

  .btn
    padding: 0.78em 1.5em