/*
	stylus-boilerplate

	forms.styl

	Author: Sean Goresht

	Created on 2014-08-23 by PhpStorm
*/

$formSectionBorderWidth ?= 1px
$formSectionBorderType ?= solid
$formSectionBorderColour ?= rgba(0, 0, 0, 0.4)

$formBordered
	border $formSectionBorderWidth $formSectionBorderType color-fallback($formSectionBorderColour)
$formSectionMargin ?= 1em
$formSectionHeadingPadding ?= 1em
$formSectionLabelWidth ?= 10em
$formFieldPadding ?= 0.3em 1em
$formActionsMargin ?= 0.3em

$formResponsive ?= true

$formSection
	box-sizing border-box
	@extend $formBordered
	margin $formSectionMargin

$formField
	box-sizing border-box
	padding $formFieldPadding

.form
	display inline-block
	if $formResponsive
		+media-query($breakpointMain)
			display inherit
	&-section
		@extend $formSection
		&-inline
			@extend $formSection
			.form-field, .form-field-horizontal, .form-field-vertical
				display inline-block
		label, input
			display inline-block
		&-header
			padding $formSectionHeadingPadding
	&-field
		@extend $formField
		&-label, &-controls
			display inline-block
			vertical-align top
		&-label
			min-width $formSectionLabelWidth
			width 10%
			if $formResponsive
				+media-query($breakpointMain)
					width 100%
			cursor pointer
		&-controls
			if $formResponsive
				+media-query($breakpointMain)
					width 100%
					input, select, textarea
						width 100%
			&-group
				display table
				input, select, textarea, label
					display table-cell
					vertical-align middle
					white-space nowrap
				&-append
					padding 0 $padding
					cursor pointer
					@extend $formBordered
					&:first-child
						border-right 0
					&:last-child
						border-left 0
		&-horizontal
			@extend $formField
			width 100%
			display table
			table-layout auto
			.form-field-label
				margin-right $formSectionMargin
				min-width $formSectionLabelWidth
			.form-field-label, .form-field-controls
				if $formResponsive
					+media-query($breakpointMain)
						display inherit
				display table-cell
				vertical-align middle
		&-vertical
			@extend $formField
			.form-field-label
				min-width 0
				width auto
			.form-field-controls
				display block
				input, select, textarea
					width 100%
	&-action
		display inline-block
		margin ($formActionsMargin * 2.3)
		&s
			margin-top $formActionsMargin
			text-align center
			border-top $formSectionBorderWidth $formSectionBorderType color-fallback($formSectionBorderColour)