$color = #6200EE
$hover = #BB86FC
$active = #3700B3

$outline-shadow = inset 0 0 0 2px $color
$outline-hover = rgba($hover, 0.3)
$outline-active = rgba($active, 0.3)

$active-shadow = 0 0 0 3px rgba(204,204,204,.75)

button, a.button
	cursor: pointer
	color: #FFF
	background-color: $color
	border-radius: 10px
	border: none
	padding: 7px 14px
	transition-property: box-shadow, background-color
	transition-duration: 200ms
	transition-timing-function: cubic-bezier(.2,0,.6,1)
	margin: 3px
	display: inline-flex
	user-select: none
	outline: none
	/* Set Chrome on Firefox base */
	line-height: 22px
	text-decoration: none
	box-sizing: border-box
	justify-content center

	&.large
		padding 20px 25px
		text-transform uppercase
		font-size 20px

	&:hover
		background-color: $hover

	&:active
		background-color: $active

	&:focus:not(.disabled)
		background-color: $active
		box-shadow: $active-shadow

	&::-moz-focus-inner
		border: none


	&.outline, &.ghost
		color: $color
		background-color: transparent

		&:hover:not(:disabled):not(.disabled)
			background-color: $outline-hover

		&:active:not(:disabled):not(.disabled)
			background-color: $outline-active

		&.loading::after
			border-color: transparent transparent $color $color

	&.outline
		box-shadow: $outline-shadow

		&:focus
			box-shadow: $outline-shadow, $active-shadow

	&:disabled, &.disabled
		background-color: #EEE
		color: #BDBDBD
		cursor: default
		pointer-events: none

		&.outline
			box-shadow: 0 0 0 2px #BDBDBD

	&.loading
		color: transparent
		position: relative
		pointer-events: none
		// cursor: default
		&::after
			content: ""
			display: block
			border: white 2px solid
			border-color: transparent transparent white white
			width: 1em
			position: absolute
			top: calc(50% - (1em / 2))
			left: calc(50% - (1em / 2))
			border-radius: 1000000000px
			height: 1em
			box-sizing: inherit
			animation: ButtonLoading .5s infinite linear


a.button.outline:focus:not(.disabled),
a.button.ghost:focus:not(.disabled),
button.outline:focus, button.ghost:focus
	background-color: $outline-active


@keyframes ButtonLoading
	0%
		transform: rotate(0)
	100%
		transform: rotate(365deg)