// ==========================================================================
// Form Fields
// ==========================================================================

@import
	"variables";

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
	*vertical-align: middle; // Improves appearance and consistency in IE6/IE7
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0; // Addresses excess padding in IE8/9
}

input[type="search"] {
	-webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
	box-sizing: content-box; // Addresses box sizing set to border-box in S5, Chrome
}

input[type="search"]::-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="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	padding: 4px;
	color: $color__text--primary;
	border: 1px solid $color__border--primary;
	&:focus {
		color: map-get($form-field, color);
	}
}

textarea {
	overflow: auto; // Removes default vertical scrollbar in IE6/7/8/9
	vertical-align: top; // Improves readability and alignment in all browsers
	width: 100%;
}
