$button-height = 36px

// structural mixin, call only once
icon-button()
	.bunt-icon-button
		line-height $button-height
		vertical-align middle
		flex-shrink 0

		background none
		outline none
		border none

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

		border-radius 50%
		padding 0
		height $button-height
		width $button-height

		&::-moz-focus-inner
			border 0

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

		&.disabled
			.bunt-icon, svg
				opacity 0.6

		&:not(.disabled)
			cursor pointer

		background-color transparent

		&.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%)
		//
		// for xcolor in $clr-names
		// 	&.color-{xcolor}
		// 		color lookup('$clr-' + xcolor)

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

		svg
			height: 20px

// styling/theming mixing
// style = 'flat', 'filled', 'clear'
icon-button-style(color = $clr-primary-text-light, style = 'flat')
	color: color
	if style is 'flat'
		&:hover:not(.disabled),
		&.dropdown-open
			background-color: darken($clr-grey-200, 3%)
		.bunt-icon
			color: color
		svg
			fill: color
		&.autofocus:focus,
		body[modality="keyboard"] &:focus
				outline-color: darken($clr-grey-200, 25%)
	// else if style is 'filled'

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

		body[modality="keyboard"] &:focus,
		&:hover:not(.disabled),
		&.dropdown-open
			background-color: alpha(black, 0.1)

		.bunt-icon
			color: color
		svg
			fill: color