/** -----------------------------------------------------:[ 4.0 - Forms ]:---------- */
button,
input,
select,
textarea {
	font-size: 100%; // Corrects font size not being inherited in all browsers
	margin: 0; // Addresses margins set differently in IE6/7, F3/4, S5, Chrome
	vertical-align: baseline; // Improves appearance and consistency in all browsers
	max-width: 100%;
}

/** ----------------------------------------:[ 4.1 - Buttons ]:--- */
.btn {
	cursor: pointer;
	display: inline-block;
	padding: 1em;
	background: @primary;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	color: #FFF;
	font-family: @headings-font-family;
	text-transform: uppercase;
	font-weight: @headings-font-weight;
	.transition( ~'box-shadow 100ms linear, border-color 100ms linear' );
	.backface-visibility( hidden );
	&:hover,
	&:focus,
	&:active {
		background: @primary;
		box-shadow: 0 0 0 3px @primary;
		color: #FFF;
	}
	&-full {
		width: 100%;
		text-align: center;
	}
	&-secondary {
		background: @secondary;
		&:hover,
		&:focus,
		&:active {
			background: @secondary;
			box-shadow: 0 0 0 3px @secondary;
		}
	}
	&-blue {
		background: @blue;
		&:hover,
		&:focus,
		&:active {
			background: @blue;
			box-shadow: 0 0 0 3px @blue;
		}
	}
	&-green {
		background: @green;
		&:hover,
		&:focus,
		&:active {
			background: @green;
			box-shadow: 0 0 0 3px @green;
		}
	}
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others
	-webkit-appearance: none; // Corrects inability to style clickable 'input' types in iOS
	.btn;
}

/** ---:[ Inputs ]:--- */
input[type="checkbox"],
input[type="radio"] {
	padding: 0; // Addresses excess padding in IE8/9
	margin-right: .5em;
}
/*input[type="search"] {
	-webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
	&::-webkit-search-decoration { // Corrects inner padding displayed oddly in S5, Chrome on OSX
		-webkit-appearance: none;
	}
}*/
button::-moz-focus-inner,
input::-moz-focus-inner { // Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
	border: 0;
	padding: 0;
}
input {
	&[type="color"],
	&[type="email"],
	&[type="password"],
	&[type="search"],
	&[type="tel"],
	&[type="text"],
	&[type="url"],
	&[type="number"],
	&[type="date"],
	&[type="time"],
	&[type="datetime"],
	&[type="datetime-local"],
	&[type="week"],
	&[type="month"] {
		outline: none;
		padding: 1em;
		background: #FFF;
		border: 1px solid @light;
		border-radius: 2px;
		color: darken( @light, 25% );
		-webkit-appearance: none;
		&:hover {
			border-color: darken( @light, 10% );
		}
		&:focus {
			border-color: darken( @light, 20% );
			color: lighten( @dark, 20% );
		}
	}
}

/*select {
	width: 100%;
	max-width: 330px;
	padding: 1em;
	background: #FFF;
	border: 1px solid darken( @light, 5% );
	border-radius: 0;
	color: darken( @light, 25% );
	outline: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	&:hover {
		border-color: darken( @light, 25% );
	}
	&:focus {
		border-color: @dark;
		color: @dark;
	}
}*/

textarea {
	overflow: auto; // Removes default vertical scrollbar in IE6/7/8/9
	vertical-align: top; // Improves readability and alignment in all browsers
	outline: none;
	width: 100%;
	padding: 1em;
	background: #FFF;
	border: 1px solid @light;
	border-radius: 2px;
	color: darken( @light, 25% );
	outline: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	&:hover {
		border-color: darken( @light, 10% );
	}
	&:focus {
		border-color: darken( @light, 20% );
		color: lighten( @dark, 20% );
	}
}

/** ----------------------------------------:[ 4.2 - Notifications ]:--- */
.success,
.error,
.notice,
.update {
	position: relative;
	padding: 1em 1em 1em 4em;
	border-radius: 2px;
	color: #FFF;
	a {
		color: #FFF;
		border-bottom: 1px solid #FFF;
		.transition( ~'background-color 200ms linear, border-color 200ms linear' );
		&:hover {
			color: #FFF;
			border-bottom-color: transparent;
		}
	}
	&:before {
		content: ' ';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 3em;
		display: inline-block;
		border-right: 1px solid transparent; 
	}
	&:after {
		position: absolute;
		top: 50%;
		left: 1em;
		min-width: 1.1em;
		text-align: center;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		line-height: 0;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}
.success {
	background: @success;
	a {
		&:hover {
			background-color: darken( @success, 10% );
		}
	}
	&:before {
		border-right-color: lighten( @success, 5% );
	}
	&:after {
		content: "\f00c";
	}
}
.notice {
	background: @warning;
	a {
		&:hover {
			background-color: darken( @warning, 10% );
		}
	}
	&:before {
		border-right-color: lighten( @warning, 5% );
	}
	&:after {
		content: "\f071";
	}
}
.error {
	background: @danger;
	a {
		&:hover {
			background-color: darken( @danger, 10% );
		}
	}
	&:before {
		border-right-color: lighten( @danger, 5% );
	}
	&:after {
		content: "\f00d";
	}
}
.update {
	background: @info;
	a {
		&:hover {
			background-color: darken( @info, 10% );
		}
	}
	&:before {
		border-right-color: lighten( @info, 5% );
	}
	&:after {
		content: "\f129";
	}
}