@import './var.inc.styl'

.button
  font-size: rem($font-size-secondary)
  line-height: rem($form-control-height - 2)
  background-color: lighten($default-color, 50%)
  border: 1px solid $default-color
  height: rem($form-control-height)
  padding: rem(0 25px)
  display: inline-block
  outline: 0
  margin: 0 0 1rem
  transition: background-color .2s, box-shadow .5s
  transition-timing-function: ease-out-sine
  cursor: pointer
  user-select: none

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

  &:hover, &:focus
    text-decoration: none

  &: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

  &.expanded
    padding-left: 0
    padding-right: 0
    text-align: center
    width: 100%

  &.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

  &.compact
    margin-bottom: 0
    height: rem($compact-control-height)
    line-height: rem($compact-control-height - 2)
    padding: rem(0 15px)

.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