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

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

	:active
		transform translateY(3px)

input, textarea, button, .button, select
	ui-element
	font-family inherit
	font-size 1em
	line-height 1.25em
	color text-color

input, textarea, select
	input-focus
	width 100%

	:disabled
		ui-disabled

input, select
	padding 0.5rem 1rem

input
	height input-height

	[pattern]
		:focus
			:invalid
				border-color red !important

			:valid
				border-color green !important

	:active
		transform translateY(3px)

.color-picker-container
	horizontal

.color-picker
	ui-element
	flex 1
	height input-height
	margin-right content-padding-half

	:hover
		cursor pointer

	:active
		transform translateY(3px)

button, .button
	horizontal
	padding 0rem 1rem
	color button-color
	align-items center
	pointer-events all
	height input-height

	button-hover

	:disabled
		ui-disabled

select
	appearance none
	-webkit-appearance none
	-moz-appearance none

	option
		color text-color
		background bg-color

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

textarea
	padding 0.4em 0.8em
	line-height 1.5em
	min-height 10rem
	transition none

.number-input-container
	horizontal

	button
		justify-content center
		margin-left 0.2rem
		width input-height
		height input-height