@import './var.inc.styl'

.button
  background-color: lighten($default-color, 50%)
  border: 1px solid $default-color
  transition: background-color .2s, box-shadow .5s
  transition-timing-function: ease-out-sine

  &, &:visited, &:hover
    &, .typo &
      color: $text-1-color

  &:not(.disabled)
    &:hover, &:focus
      background-color: darken($default-color, 5%)
      border-color: darken($default-color, 5%)
      box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)

    &:focus
      border-color: $input-focus-color

  &.rounded
    border-radius: rem($form-control-height / 2)

  &.primary
    border-color: $primary-color
    background-color: $primary-color

    &, &:visited, &:hover
      &, .typo &
        color: #FFF

    &:not(.disabled)
      &:hover
        background-color: lighten(saturate($primary-color, 30%), 10%)
        border-color: saturate($primary-color, 70%)
        box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)

  &.disabled
    cursor: default
    opacity: 0.5

.button.inverse
  line-height: rem($form-control-height - 4)
  border: 2px solid #FFF
  background: none

  &, &:visited
    &, .typo &
      color: #FFF

  &:not(.disabled)
    &:hover, &:focus
      border-color: $immersive-primary-color
      background: none
      box-shadow: none
      &, .typo &
        color: $immersive-primary-color