@charset 'utf-8'
@import 'colors'

.ui-kit-button
  width: 100%
  height: 40px
  margin: 0 0 10px 0
  border-radius: 10px
  font-size: 14px
  background: #fff
  color: $primary
  border: 1px solid $primary
  cursor: pointer
  display: flex
  justify-content: center
  align-items: center
  span
    color: $primary
  &:hover
    background: $primary
    span
      color: $white
  &.is-active
    span
      color: $white
    background: $primary-dark
  
  &.success
    border-color: $green
    span
      color: $green
    &:hover
      background: $green
      span
        color: $white
    &.is-active
      background: darken($green, 20)
      span
        color: $white
  
  &.small
    height: 25px
    font-size: 12px
    border-radius: 5px

  &.large
    height: 50px
    font-size: 18px
    border-radius: 15px

  &.danger
    border-color: $red
    span
      color: $red
    &:hover
      background: $red
      span
        color: $white
    &.is-active
      background: darken($red, 20)
      span
        color: $white

  &.warning
    border-color: $yellow
    span
      color: $yellow
    &:hover
      background: $yellow
      span
        color: $white
    &.is-active
      background: darken($yellow, 20)
      span
        color: $white