button-round-factor($size)
  if $size == 'small'
    .54
  else
    .47

.q-btn
  display inline-flex
  align-items center
  justify-content center
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  -webkit-appearance button
  padding $button-padding
  text-decoration none
  color inherit
  background transparent
  transition $button-transition

  &.disabled
    opacity .7 !important
  &.full-width
    border-radius 0 !important
    white-space normal

.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-bottom 3px solid rgba(0, 0, 0, .15)
  border-radius 7px
  &:active:not(.disabled)
    border-bottom 0

.q-btn-rounded
  border-radius 28px

.q-btn-round
  border-radius 50%
  padding 0

for $name, $size in $button-sizes
  .q-btn-{$name}
    min-height $size
    font-size round($size * .38)
    .q-icon
      font-size round($size * .68)
    .q-spinner
      height round($size * .68)
      width round($size * .68)
for $name, $size in $button-round-sizes
  .q-btn-round.q-btn-{$name}
    height $size
    width $size
    .q-icon, .q-spinner
      height round(button-round-factor($name) * $size)
      width round(button-round-factor($name) * $size)
      font-size round(button-round-factor($name) * $size)