// Field
// @type: element
// ===================================

$field: (
	enabled: 						true,

	invalid-color: 					luiPalette(red, color),
	valid-color:					luiPalette(green, color),

	input: (
		styles:						("material", "compact"),
		vertical-padding: 			0.5em,
		font-size:					1.1em,
		placeholder-color:			transparentize(luiTheme(element, typography, body, color), 0.35),
		selection-background:		transparentize(luiPalette(primary, color), 0.5),
		selection-text:				luiPalette(primary, text),

		label: (
			color: 					luiPalette(light, color, dark),
			displaced-font-size:	0.9em,
		),

		transition: (
			duration:				100ms,
			easing:					cubic-bezier(0.25, 0.8, 0.25, 1)
		),

		// Material style
		material: (
			default-border-width: 	1px,
			default-border-color:	luiPalette(light, color),

			focus-border-width:		2px,
			focus-border-color: 	luiPalette(primary, color),

			vertical-padding: 		0.5em,
			horizontal-padding: 	0em,

			hover-color: 			luiPalette(primary, color),

		),

		// Compact style
		compact: (
			border-width: 			1px,
			border-color: 			luiPalette(light, color),
			border-radius: 			luiTheme(adjective, rounded, radius),
			background-color: 		#FFFFFF,
			selection-color: 		#FFF,
			selection-background: 	transparentize(luiPalette(primary, color), 0.5),
			vertical-padding: 		0em,
			horizontal-padding: 	0.5em,

			hover-color: 			luiPalette(light, color, dark),

			focus: (
				background-color: 	#fafafa,
				border-color: luiPalette(grey, color)
			),

			label-right-padding: 1em,

			label-lengths: (
				x-short: 3em,
				short: 5em,
				medium: 7em,
				large: 9em,
				x-large: 11em
			)
		)
	),

	valid-icon-size:			0.75em,
	vertical-margin: 			2em,

	natural-hover-background: 	rgba(50, 50, 50, 0.05),


	message: (
		font-size: 				0.85em,
		helper-color: 			luiPalette(light, color, dark)
	),

	fieldset: (
		legend: (
			font-size:			1em,
			font-weight:		500
		)
	),

	field: (
	),

	lengths: (
		x-short: 				lui_rem(5),
		short: 					lui_rem(8),
		medium:					lui_rem(15),
		long: 					lui_rem(20),
		x-long: 				lui_rem(25)
	),

	tagged: (
		enabled:				true
	),

	iban: (
		enabled:				true
	),

	percentage: (
		enabled:				true,
		width:				2.5em,
	),

	userpicker: (
		enabled: 				true
	),

	image-picker: (
		enabled: 				true,

		size: 					12em,
		background-color: 		#CCC,
		background-position: 	50% 50%,
		background-repeat: 		no-repeat,
		background-size: 		cover,
		overlay: (
			height: 			5em,
			padding: 			1em,
			opacity: 			0.8,
			bg-color: 			black,
			color: 				white,
			transition: 		all luiTheme(adjective, animated, transitions, animationEasing) luiTheme(adjective, animated, transitions, animationDuration),
		),
		cropper: (
			bg-color: 			luiPalette(light, color),
			height: 			40em,
		),
		popover: (
			bg-color: white,
			hover-color: luiPalette(light, color, light),
		),
		material: (
			loader-size: 			3em,
		)
	),

	momentpicker: (
		enabled: 				true,

		width: 					1.5em,
		max-width: 				5.25em
	),

	timespanpicker: (
		enabled: 				true,

		width:					4em
	),

	translations: (
		enabled:				true
	),

	translations-list: (
		enabled:				true,
		hover-color:				#000,
		menu-bg-color:				#FAFAFA,
		background-color:				#FFF,
		box-shadow:				0 0 3px 0 rgba(0,0,0, .2)
	),

	dropdown: (
		enabled:				true,
		z-index:				10,
		hover-color:				luiPalette(light, color)
	),
	departmentpicker: (
		enabled:				true,
		placeholder-color:				luiTheme(element, typography, body, color)
	),
	ui-select: (
		enabled:				true
	),

	datepicker: (
		enabled: 				true,

		input: (
			width: 				10em,
		),

		header: (
			font-size: 			1.5em,
			font-weight: 		normal,
			hover-weight:		600,
			padding: (
				vertical: 		lui-rem(0.5),
				horizontal:		0
			)
		),

		heads: (
			font-weight: 		normal,
			color: 				luiPalette(light, color, dark)
		),

		day: (
			size: 				2.5em,

			empty: (
				border: (
					width: 		1px,
					style: 		solid,
					color: 		#FAFAFA
				)
			),

			disabled: (
				background-color: #FFF,
				color: 			luiPalette(light, color),
				opacity: 		0.5,

				border: (
					width: 		1px,
					style: 		double,
					color: 		luiPalette(light, color)
				)
			),

			default: (
				background-color: #FFF,
				color: 			luiPalette(grey, color),

				border: (
					width: 		1px,
					style: 		double,
					color: 		luiPalette(light, color)
				),

				hover: (
					background-color: luiPalette(light, color, light),
					color: 		luiPalette(grey, color)
				)
			),
			selected: (
				background-color: luiPalette(primary, color),
				color: 			luiPalette(primary, text),

				border: (
					width: 		1px,
					style: 		double,
					color: 		darken(luiPalette(primary, color), 3),
				),

				hover: (
					background-color: darken(luiPalette(primary, color), 3),
					color: 		luiPalette(primary, text)
				)
			),
			in-between: (
				background-color: luiPalette(primary, color, light),
				color: 			luiPalette(primary, text),

				border: (
					width: 		1px,
					style: 		double,
					color: 		luiPalette(primary, color),
				),

				hover: (
					background-color: darken(luiPalette(primary, color, light), 10),
					color: 		luiPalette(primary, text),
				)
			)
		),

		popup: (
			footer: (
				background: 	#FAFAFA
			)
		)
	),

	switch: (
		enabled: 				true,

		width: 					4.5em,
		height: 				2.25em,
		background: 			#666,
		color: 					darken(#666, 15),
		active-background: 		luiPalette(primary, color),
		active-color:			luiPalette(primary, color, dark),
		grab-lines-color: 		luiPalette(light, color),
	)
);

$luiTheme: luiSetTheme(element, field, $field);