mixin input-focus
	:focus
		color black
		border 1px solid input-focus-border-color
		// TODO: Replace with alpha(main-color, 20%) function
		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)

input, textarea, button, select
	font-family inherit
	font-size 1em
	padding 0.4em 0.8em
	border-radius 3px
	color text-color

input, textarea
	border ui-border
	background white
	box-shadow none
	width 100%
	input-focus
	
	:disabled
		ui-disabled

input
	default-transition

	:active
		transform translateY(3px)

// We need this to have a selector with a higher priority than .widget-element:focus
input.widget-element,
textarea.widget-element
	input-focus

textarea
	height 10rem

button, .button
	ui-element
	horizontal
	font-size 1rem
	line-height 1rem
	padding 0.75rem 1rem
	color link-color

	:hover,
	&.active
		cursor pointer
		color white
		background-color button-hover-color

	:active
		transform translateY(3px)
	
	// box-shadow 0 0 2px white, 0 -2px 5px rgba(0, 0, 0, 0.08) inset
	// :active
	// 	background-color black
	// 	color white
	// :focus
	// 	color rgb(0, 0, 0)
	// 	// box-shadow 0 0 6px alpha(mainColor, 20%)
	// 	border 1px solid main-color

// select
// 	ui-element
// 	font-size 1rem
// 	padding 0.5em 1em

label
	width 100%
	padding 0.5rem 0
	text-align left

// input[type="submit"]:hover,
// button:hover
// 	cursor pointer
// 	text-decoration none

// button[disabled]
// 	opacity 0.5
// 	:hover
// 		cursor not-allowed