.q-btn
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  -webkit-appearance button
  padding $button-padding
  font-size $button-font-size
  text-decoration none
  color inherit
  background transparent
  transition $button-transition
  min-height 2.572em
  .q-icon, .q-spinner
    font-size 1.4em
  // workaround for alignment/sizing change when showing loader
  .q-btn-inner:before
    content ''

  &.disabled
    opacity .7 !important

.q-btn-progress
  transition all .3s
  height 100%
  background rgba(255, 255, 255, .25)
  &.q-btn-dark-progress
    background rgba(0, 0, 0, .2)

.q-btn-rectangle
  border-radius $button-border-radius

.q-btn-outline
  border 1px solid currentColor
  background transparent !important

.q-btn-push
  border-radius $button-push-border-radius
  border-bottom 3px solid rgba(0, 0, 0, .15)
  &:active:not(.disabled)
    transform translateY(3px)
    border-bottom-color transparent

.q-btn-rounded
  border-radius $button-rounded-border-radius

.q-btn-round
  border-radius 50%
  padding 0
  min-height 0
  height 3em
  width 3em

.q-btn-dense
  padding .285em
  min-height 2em
  &.q-btn-round
    padding 0
    height 2.4em
    width 2.4em
  .on-left
    margin-right 6px
  .on-right
    margin-left 6px

.q-btn-fab, .q-btn-fab-mini
  .q-icon
    font-size 24px
.q-btn-fab
  height 56px
  width 56px
.q-btn-fab-mini
  height 40px
  width 40px