// Text Input
//
// Below are the text-oriented form elements used on the site.
//
// Styleguide 2.1


// Single-Line Text Boxes
//
// Your standard, everyday text boxes.
//
// :hover    - Highlight the text box when hovering
// :focus    - Similar to `:hover`, however it should demand more attention than when an input is simply hovered.
// :disabled - When disabled, the input's appearance should reflect as such.
//
// Markup: <input type="text" class="{$modifiers}" value="Text"/>
// 
// Styleguide 2.1.1
input[type='text'] {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;

	box-sizing:border-box;

	font-size:14px;
	line-height:1.5em;
	padding:8px;

	border:1px solid #aaa;
	background-color:#eee;
	outline:0;

	border-radius:3px;
	box-shadow:inset 1px 1px 1px rgba(0, 0, 0, 0.15);

	&:hover {
		border-color:#999;
		background-color:#f0f0f0;
	}

	&:focus {
		border-color:#89e;
		background-color:#fff;
		box-shadow:inset 1px 1px 2px rgba(20, 20, 120, 0.3);
	}

	&:disabled {
		border-color:#ccc;
		background-color:#eee;
		color:#999;
	}
}

// Label/Textbox Pairs
//
// All labelled textboxes should be included in a wrapper `<div>` element for both layout
// convenience and specific styling.
// 
// Markup:
// <div class="mod-input text {$modifiers}">
//     <label>Text Label</label>
//     <input type="text" value="Text Input"/>
// </div>
// 
// .disabled  - To be used when the text input inside is expected to be disabled.
// .invalid   - To be used if the input has failed a validation check.
// .valid     - To be used if the input has passed a validation check (intended for live validation in particular).
//
// Styleguide 2.1.2
.mod-input {
	position:relative;
	display:block;

	&>label {
		width:45%; font-weight:bold;
	}

	&>input, &>label {
		display  : -moz-inline-stack;
		display  : inline-block;
		zoom     : 1;
		*display : inline;
	}

	&.disabled {
		color:#888;
		input {
			border-color:#ccc;
			background-color:#eee;
			color:#999;
		}
	}

	&.invalid {
		label {
			color:#911;
		}
		input {
			border-color:#e65;
			background-color:#fdd;
		}
	}
	&.valid {
		label {
			color:#191;
		}
		input {
			border-color:#6e5;
			background-color:#dfd;
		}
	}
}