@import './var.inc.styl'

.button
  &:not(.codicon)
    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