// COMPONENT: Button: an interactive clickable element. Can be applied to
// BUTTON tags, A tags, and INPUT tags.
button
  @extend %input-base

input[type=submit],
.button
  @extend %input-base

  background-color: transparent
  color: $text
  border-color: $border
  cursor: pointer
  font-size: $font-size-control
  font-weight: 600
  letter-spacing: -0.03em
  padding: 0 ($input-padding * 2)
  text-align: center
  text-decoration: none
  transition: all 100ms $heavy
  white-space: nowrap

  &:not(.button--small)
    @extend %control-height

  &:not(.button--block):not(:last-child)
    margin-right: $input-padding

  > *
    display: inline-block

    + *
      margin-left: $input-padding

  .icon
    font-size: 120%

  &.button--narrow
    padding-left: $input-padding
    padding-right: $input-padding

  &.button--round
    border-radius: 1000px !important

  &.button--square
    padding-left: 0
    padding-right: 0
    width: $input-height

  &.button--small
    font-size: $font-size-control
    padding: 0 $input-padding

button,
input.button,
input[type="submit"]
  @at-root form:invalid &,

  &[disabled]
    cursor: default
    opacity: $focus-shadow-opacity

input[type=submit]:not([class~="button"]),
input[type=submit][class="button"],
.button--submit
  background-color: $tint !important
  border-color: $tint !important
  color: $background !important

  &:focus, &:hover
    background-color: darken($tint, 5%) !important

.button--quiet
  border-color: transparent

  &:hover
    background-color: $border-light
    border-color: $border-light
