/**
 * Forms
 * =================================
 * Kickoff's forms has support for themes. See below for info about them.
 *
 * The styles here are base styles that apply to both themes,
 * they are more of a reset before you make stylistic amends to form fields
 *
 */

@import "form-helpers"; // Helper mixins

/**
 * Form themes
 * This file contains the base form styles and each theme file contains
 * overrides and additions.
 *
 * Choose from:
 * - `standard`: the original Kickoff form theme
 * - `material`: basic version of Google's Material design forms
 *
 * Usage: (choose from)
 * @import "form-theme-standard";
 * @import "form-theme-material";
 */
@import "form-theme-standard";

/**
 * Custom controls
 * - Radios/checkboxes
 * - Select element
 * - File upload
 */
@import "forms-custom-radioscheckboxes"; // Radio & checkbox inputs
@import "forms-custom-select"; // Select element
@import "forms-custom-file"; // File input


/**
 * Base form styles
 * =================================
 * Demo: http://trykickoff.com/demos/forms.html#layout-example-labels-above
 * Code: https://gist.github.com/mrmartineau/6712577#file-labels-above-inputs-html
 * Usage:
  	<div class="form-controlGroup">
  		<label for="name" class="form-label">Name</label>
  		<div class="form-controlGroup-inputWrapper">
  			<input type="text" id="name" placeholder="Zander Martineau" class="form-input"/>
  		</div>
  	</div>
 */


.form-legend {
	display: block;
	width: 100%;
}

/**
 * Form inputs and groups
 */
.form-controlGroup {}

// Legend collapses margin, so next element is responsible for spacing
.form-legend + .form-controlGroup {
	// margin-top: $baseline; // Add this to theme
	-webkit-margin-top-collapse: separate;
}

// Identify controls by their labels
.form-label {
	display: block;
}

// Any form inputs
.form-input {
	display: block;
	width: 100%;
	vertical-align: baseline;

	&:focus {
		outline: 0;
		outline: thin dotted \9; // IE6-9
	}

	&[type="image"],
	&[type="checkbox"],
	&[type="radio"],
	&[type="range"] {
		width: auto;
		height: auto;
		padding: 0;
		line-height: normal;
		cursor: pointer;
		border-radius: 0;
		box-sizing: border-box;
		// border: 0 \9; // IE9 and down
	}

	&[type="image"] {
		border: 0;
	}

	// Reset the file input to browser defaults
	&[type="file"] {
		width: auto;
		height: 28px;
		padding: initial;
		line-height: initial;
		border: initial;
		background-color: initial;
	}

	// Hidden inputs
	&[type="hidden"] {
		display: none;
	}

	// See http://martineau.tv/2013/05/hidden-characters-in-password-inputs/
	&[type="password"] {
		font-family: sans-serif;
	}

	&[type="range"] {
		width: 100%;
	}

	> .radio:first-child,
	> .checkbox:first-child {
		padding-top: 5px; // has to be padding because margin collapses
	}

	// Disabled State
	&[disabled],
	&[readonly] {
		cursor: not-allowed;
	}
}

.form-input--textarea {
	height: auto;
	min-height: 5em;
	resize: vertical;
}

.form-input--textarea--uneditable {
	width: auto;
	height: auto;
}

.form-input-file {
	display: inline-block;
	width: 100%;
	margin: 0;
	vertical-align: middle;
	line-height: 1em;

	&:focus {
		outline: none;
	}
}

// Help out input buttons
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	width: auto;
	cursor: pointer;
	-webkit-appearance: button;
}


/**
 * Checkboxes:
 * =================================
	<label class="control">
		<input type="checkbox" value="check1">
		This is a checkbox
	</label>
	<label class="control control--inline">
		<input type="checkbox" value="check1">
		This is a checkbox
	</label>

 * Radios:
 * =================================
	<label class="control">
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		This is a radio
	</label>
	<label class="control control--inline">
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
		This is a radio
	</label>
 */
.control {
	display: block;
	line-height: 1;

	& + & {
		margin-top: ko-multiply($baseline, 0.5);
	}

	input {
		vertical-align: top;
		display: inline;
		line-height: 1;
		margin-right: 0.5em;
	}
}

// Radios and checkboxes on same line
.control--inline {
	display: inline-block;
	vertical-align: middle;

	& + & {
		margin-top: 0;
		margin-left: 1.5em;
	}
}


/**
 * Form validation messages
 */
.form-controlGroup .form-message {
	display: none;
}