/*
Form input elements

Basic styling for form inputs.

Styleguide 3.7
*/


/*
Text inputs

.textInput         - Basic styling for text input elements.
.textInput:hover   - Hover styling for basic text input elements.
.textInput:focus   - Focused styling for basic text input elements.

Markup:
<input type="text" class="{$modifiers}" /><br>
<textarea class="{$modifiers}" cols="40"></textarea>

Styleguide 3.7.1
*/
%textInput,
.textInput {
	height: map-get($textInput, height);
	padding: .2em .4em;
	@include rem(margin-bottom, map-get($textInput, bottomSpacing));

	background: $content-background;
	border: map-get($textInput, border);
	border-radius: map-get($textInput, borderRadius);
	box-shadow: map-get($textInput, boxShadow);

	@include font-size(map-get($textInput, fontSize));
	color: map-get($textInput, textColor);
}
textarea {
	height: auto; /* Reset height since textareas have the attribute rows="" */
	min-height: ($base-line-height *3) +px; /* Set a min-height for textareas of 3 rows */

	resize: vertical; /* So users cannot expand the textarea over it's boundaries */
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9. */
	vertical-align: top; /* Improves readability and alignment in all browsers. */
}

input::-webkit-datetime-edit {
	/**
	 * A possible shadow-dom fix for webkit control spacing on input[type=time]
	 */
	margin-top: -.17em;
	margin-bottom: -.17em;
}

/*
Checkboxes / Radio buttons

Markup:
<label><input type="checkbox" /> I am an checkbox</label>
<label><input type="radio" /> I am an radio button</label>

Styleguide 3.7.2
*/
input[type="checkbox"],
input[type="radio"] {
	margin-right: .35em;
	cursor: pointer;
}