.btn
  display: inline-block
  padding: 1rem 1.5rem
  color: $text-dark
  cursor: pointer
  font-weight: 400
  border-radius: 5px
  border-color: transparent
  text-decoration: none
  margin-top: 10px

.btn-rounded
  border-radius: 30px

.btn-lg
  padding: 1rem 2.5rem
  font-size: 1.4em

.btn-block
  width: 100%
  display: block
  margin: 0.4em 0

.btn-link
  background: transparent !important
  color: inherit

.btn-light
  background: white
  color: var(--dark)
  &:hover
    background: var(--grey)

@each $variation in $variations
  .btn-#{$variation}
    background: var(--#{$variation})
    border: 0.5px solid var(--#{$variation})
    &:hover
      background: var(--#{$variation}-hover)
      border: 0.5px solid var(--#{$variation}-hover)

button:disabled
  opacity: .8
  color: white
  border: unset
  background: grey

  &:hover
    background: grey
    border: unset