$button-padding: .5rem

// Components for button
input[type='submit'],
input[type='reset'],
input[type='button'],
.button,
.button-sm,
.button-lg,
button
  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  background-color: $light
  border-color: darken($light, 20%)
  border-radius: $b-radius
  border-style: solid
  border-width: $b-width
  box-sizing: border-box
  cursor: pointer
  display: inline-block
  font-size: 1rem
  margin-bottom: .5rem
  text-align: center
  text-decoration: none
  white-space: nowrap

.button,
button
  height: 2.5rem
  line-height: 2.5rem
  padding-left: $button-padding
  padding-right: $button-padding


.button-sm
  font-size: smaller
  height: 2rem
  line-height: 2rem
  padding-left: $button-padding / 2
  padding-right: $button-padding / 2

.button-lg
  font-size: larger
  height: 3rem
  line-height: 3rem
  padding-left: $button-padding * 1.5
  padding-right: $button-padding * 1.5

// Media Query Break Points
// Large Phones
@media only screen and (min-width: $sm)
// Tablets
@media only screen and (min-width: $md)
// Notebooks and Desktops
@media only screen and (min-width: $lg)