// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Basic form controls: inputs, textareas, buttons

// Disabled form element
.is-disabled
	cursor: default
	pointer-events: none
	text-shadow: none


// Bones

.field,
.button
	display: block
	vertical-align: middle
	font-size: 1em
	line-height: 1
	outline: 0
	transition: opacity .25 ease-out

	&_inline
		display: inline-block

	&.is-disabled
		opacity: .4

.field
	// Hide IE10 clear button
	&::-ms-clear
		size: 0  // Not display:none because: http://bit.ly/1h3UlAH

.field_area
	resize: vertical

.button
	no-select()
	position: relative  // Fixes strange bugs in webkit
	text-decoration: none
	white-space: nowrap
	cursor: pointer

	// Fixing Mozilla's inner paddings
	// https://github.com/nanoblocks/nanoblocks/blob/gh-pages/blocks/button/button.styl
	&::-moz-focus-inner
		padding: 0
		border: none

.form
	&_inline .field,
	&_inline .button,
	&_inline .select,
	&_inline .password
		display: inline-block

	&_full .field,
	&_full .button,
	&_full .select,
	&_full .password
		width: 100%

	&__group
		space(2)

	&__row
		space()
		&:last-child
			space(0)

	&__left
		float: left

	&__right
		float: right


// Default skin

modules_default_skin ?= true
form_default_skin ?= false


if modules_default_skin or form_default_skin

	.field,
	.button
		height: 2em
		border-radius: form_border_radius

		&:focus
			outline: 0
			border-color: form_focus_color

	.field,
	.button:active
		transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out

	.field
		padding: .3em .4em
		background: #fff
		border: 1px solid #bbb
		box-shadow: inset 0 .1em .2em black(.1)

		&:focus
			box-shadow: inset 0 .1em .2em black(.1), 0 0 .4em rgba(form_focus_color, .75)

		&_area
			height: auto

	.button
		height: 2em
		padding: .45em 1.5em .35em;
		background: #dfdfdf
		background: linear-gradient(to bottom, #fefefe, #eaeaea)
		border: 1px solid #bbb
		border-bottom-color: #aaa
		color: #555
		border-radius: form_border_radius
		box-shadow: 0 .1em .1em black(.05)
		text-shadow: 0 1px 0 white(.4)

		&:focus
			box-shadow: 0 0 .4em rgba(form_focus_color, .75)

		&:not(.is-disabled):hover
			background: linear-gradient(to bottom, #fff, #f0f0f0)
			color: #333

		&:not(.is-disabled):active
			padding-top: .55em
			padding-bottom: .25em
			background: #cacaca
			background: linear-gradient(to bottom, #aaa, #dfdfdf)
			box-shadow: 0 0 .4em rgba(form_focus_color, .75), inset 0 .1em .2em black(.2), 0 .025em .05em black(.05)
			border-color: form_focus_color
			border-top-color: #888