// Input
// 
// These are inputs, though some of them have a clear button.
// 
// Styleguide 7

// Basic Input
// 
// Markup:
// <input type="text" placeholder="placeholder text" tabindex="1" />
// 
// Styleguide 7.1


// Disabled
// 
// Markup:
// <input type="text" placeholder="placeholder text" disabled />
// 
// Styleguide 7.2


// Default with reset
// 
// Markup:
// <form class="input-reset">
//     <input type="text" placeholder="placeholder text" tabindex="1" />
//     <input class="reset" type="reset" value="X" tabindex="2" />
// </form>
// 
// Styleguide 7.3


// TEXT INPUTS
input {
	.radius;
	.fontfamily(lucida);
	.fontsize(1.4);

	width: 100%;
	height: @input-height; // same as @btn-height
	padding: 2.5px 23px 2.5px 5px;

	color: @colorS4;

	border: 1px solid @input-bordercolor;
	&:disabled,
	&.disabled {
		border-color: @input-disabled-bordercolor;
	}
}

.input-reset {
	position: relative;
	> input {
		+ .reset {
			.fontsize(1.5);

			position: absolute;
			top: 2px;
			right: 2px;

			width: 25px;
			height: @input-height - 4; // take into account the border and border radius
			padding: 0;

			line-height: 1.5rem;
			color: @input-reset-color;

			background-color: @input-reset-bgcolor;
			border: @input-reset-bordercolor;
			border-radius: 0;
			&:hover {
				color: @input-reset-color-hover;
			}
		}
	}
}

// RADIO / CHECKBOXES
input[type='radio'],
input[type='checkbox'] {
	.fontsize(1.5);
	.lh(16);

	display: inline-block;
	width: auto;
	height: 16px;
	padding-left: 20px;
	margin: 4px 0 0;

	vertical-align: bottom;
	cursor: pointer;
}

label {
	padding-right: 1px;
	&:active {
		text-decoration: underline;
	}
}