@import "buttons";

#{$all-text-inputs}, select, label.select-wrap {
	width: $form-field-w;
	margin-right: 3px;
}

input[type="number"], input.short, select.short {
	width: 123.5px;
}
input.tiny, select.tiny {
	width: 90px;
}

#{$all-text-inputs}, select {
	border: 0 none;
	border-bottom: 2px solid $c-form-highlight;
	background-color: $c-form-field-bg;
	color: $c-form-field-fg;
	padding: 4px 6px;
	line-height: 1em;
	//outline: 0 none !important;
	//-moz-outline: 0 none !important;
	font-weight: normal;

	&:focus, &:hover {
		border-bottom-color: $c-form-highlight-a;
	}
}

.Row.checkbox {
	$h: 27px;
	line-height: $h;

	.box {
		overflow: hidden;
		width: $h;
		height: $h;
		border: 1px solid #808080;
		border-radius: 3px;
		background: $c-form-field-bg;
		display: inline-block;
		position: relative;
		cursor: pointer;
		color: $c-form-highlight-a;

		&::before {
			font-family: "fontello";
			position: absolute;
			//content: '×';
			//content: '✓';
			left: 0; top: 0; right: 0; bottom: 0;
			line-height: 25px;
			text-align: center;
			font-size: 20px;
			vertical-align: middle;
			display: none;
		}

		@include icon-content('ok');

		&.checked::before {
			display: block;
		}
	}
}

.Row.range {
	.display {
		margin-left: 1ex;
	}

	label .display { font-weight: normal; }
}

//#{$all-text-inputs} {
//	@include can-select();
//}

//textarea {
//	font-family: monospace;
//	line-height: 1.2em;
//	display: block; // fixes weird bottom margin
//}

//@import "select";