// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
button.button,
input[type="submit"].button,
input[type="reset"].button
  border: none
  font-size: 100%
  font-family: inherit
  line-height: 1.3em
  -webkit-appearance: none
  -moz-appearance: none

a.button
  text-decoration: none
  color: $text-color

.button
  display: inline-block
  vertical-align: text-bottom
  padding: $gap/2 $gap
  border-radius: $radius
  font-weight: 700
  text-align: center

  &.is-big
    font-size: 1.4em

  &:hover
    cursor: pointer
  &:focus
    border-color: $black
    outline: none

  &, &.is-gray
    background-color: $border
    &:hover
      background-color: shade($border, .1)

  &.is-blue
    background-color: $blue
    color: $white
    text-shadow: 0px 1px 0px shade($blue, .3)
    &:hover
      background-color: shade($blue, .1)

  &.is-red,
  &.has-hover-red:hover
    background-color: $red
    color: $white
    &:hover:not(.has-hover-red)
      background-color: shade($red, .1)

  &.is-dark
    background-color: $dark
    color: $white
    text-shadow: 0px 1px 0px shade($dark, .3)
    &:hover
      background-color: shade($dark, .1)

  &.is-white
    background-color: $white
    color: $text-color
    &:hover
      background-color: shade($white, .1)
      color: rgba($black, .9)

    +dark-mode
      color: $white
      background-color: $dark
      &:hover
        background-color: shade($dark, .1)

  &.is-yellow
    background-color: $yellow
    color: rgba($black, .9)
    &:hover
      background-color: shade($yellow, .1)

  &.is-green
    background-color: $green
    color: rgba($black, .9)
    &:hover
      background-color: shade($green, .1)

  &.is-beveled
    background: linear-gradient(180deg, #EEEEEE 23.44%, tint($blue, .9) 100%)
    border: 0.0625rem solid $border
    box-shadow: inset 0px -2px 0px $border, inset 0px 2px 0px #FFFFFF
    color: rgba($dark, .8)
    text-shadow: 0 0.0625rem 0 rgba($white, .75)
    &:hover
      background: linear-gradient(180deg, shade($white, .1) 23.44%, tint($blue, .8) 100%)
    &:active
      background: linear-gradient(180deg, #EEEEEE 23.44%, tint($blue, .7) 100%)


  &.is-disabled,
  &[disabled]
    pointer-events: none
    background-color: $border
    color: rgba($black, .75)
    text-shadow: none
    &:hover
      cursor: not-allowed

  &.has-border
    border: 1px solid $border

  &.is-small
    padding: $gap/4 $gap/2
    font-size: .8em
    font-weight: 600
    border-radius: $radius/2

  &.is-block
    display: block

  &-icon
    pointer-events: none

.buttons-conjoined

  display: inline-block

  & > .button
    border-radius: 0
    border-right-width: 0
    margin-right: -4px
    &:first-child
      border-top-left-radius: $gap/2
      border-bottom-left-radius: $gap/2
    &:last-child
      border-top-right-radius: $gap/2
      border-bottom-right-radius: $gap/2
      &.has-border,
      &.is-beveled
        border-right-width: 0.0625rem

  &.is-vertical
    & > .button
      display: block
      margin-right: 0
      border-right-width: 0.0625rem
      &.has-border
        border-bottom-width: 0
      &:first-child
        border-radius: $gap/2 $gap/2 0 0
      &:last-child
        border-radius: 0 0 $gap/2 $gap/2
        &.has-border
          border-bottom-width: 0.0625rem
