$button-height = 36px

button()
	.bunt-button, .bunt-link-button
		font-family $font-stack
		font-size 14px
		text-transform uppercase
		font-weight 500
		line-height $button-height
		vertical-align middle
		flex-shrink 0
		// overflow hidden
		outline none
		border none

		position relative
		display inline-flex
		align-items center
		justify-content center
		cursor default

		border-radius 4px
		padding 0 16px
		min-width 80px
		height $button-height
		white-space: nowrap // buttons can't be multiline

		&::-moz-focus-inner
			border 0

		&.autofocus:focus,
		body[modality="keyboard"] &:focus
			outline-style solid

		&.disabled .bunt-button-content
			opacity: 0.6

		&:not(.disabled)
			cursor pointer

		.bunt-progress-circular
			position absolute
			top 50%
			left 50%
			&.active
				animation button-container-rotate 1568ms linear infinite
			@keyframes button-container-rotate
				from
					transform translate(-50%, -50%) rotate(0deg)
				to
					transform translate(-50%, -50%) rotate(360deg)

		.bunt-icon.error, .bunt-icon.success
			position absolute

		&.error
			.bunt-tooltip
				background-color $clr-danger

	.bunt-button-content
		display flex

		&.invisible
			visibility hidden

	.bunt-icon
		height $button-height
		line-height $button-height
		font-size 20px

	.bunt-button-raised
		box-shadow 0 0 2px alpha(black, 0.12), 0 2px 2px alpha(black, 0.2)
		transition box-shadow 0.1s

		&.autofocus:focus,
		body[modality="keyboard"] &:focus
			outline none
			box-shadow 0 0 5px alpha(black, 0.22), 0 3px 6px alpha(black, 0.3)

_flat-button-color(color)
	background-color color

	&:hover
		background-color darken(color, 15%)

	&.autofocus:focus,
	body[modality="keyboard"] &:focus
		background-color darken(color, 15%)
		outline-color darken(color, 25%)
// styling/theming mixing
// style = 'flat', 'clear'
// size = 'normal', 'large', 'huge'
// use contrast instead of lightness?
button-style(style = 'flat', color = style is 'clear' ? $clr-primary-text-light : $clr-grey-200, text-color = lightness(color) < 60% ? $clr-primary-text-dark : $clr-primary-text-light, size = 'normal')
	if style is 'flat'
		color text-color

		_flat-button-color(color)

		&.autofocus:focus,
		body[modality="keyboard"] &:focus
			outline-width 2px
			outline-offset 2px

		.bunt-ripple-ink .ripple.held
			opacity: 0.7

		&.error
			_flat-button-color($clr-danger)

		&.success
			_flat-button-color($clr-success)

	else if style is 'clear'
		color color
		background-color transparent

		&:hover:not(.disabled)
			background-color: alpha(color, 0.08)

		&.autofocus:focus,
		body[modality="keyboard"] &:focus
			outline-width 2px
			outline-offset 0

		// &.color-default
		// 	color $clr-primary-text-light
		// 	.bunt-icon
		// 		color $clr-secondary-text-light
		// 	&.autofocus:focus,
		// 	body[modality="keyboard"] &:focus
		// 			outline-color darken($clr-grey-200, 25%)

	.bunt-progress-circular svg circle
		stroke: text-color

	if size is 'large'
		font-size: 18px
		height: 52px
		padding: 0 64px
	if size is 'huge'
		font-size: 32px
		font-weight: 300
		height: 64px
		padding: 8px 64px