//
// FORM ELEMENTS
// Some field types are imported at the bottom 
// of this file so they inherit styles
// --------------------------------------------------



// TEMP FIXES
// ==============================

.Select {
	position: relative;
}

// ==============================
// END TEMP FIXES




// Adding vertical spacing between form elements
.field,
.form-indent,
.field-ui .row,
#signin-form .row {
	margin-top: @input-vspacing;
}


// Field Item
// I usually house controls like buttons aswell as the input

.field-item {
	margin-bottom: floor(@input-vspacing / 2);
	position: relative;
}
.field-item-button {
	display: inline-block;
	font-size: 16px;
	height: 100%;
	line-height: @input-height-base;
	padding: 0 @font-size-small;
	position: absolute;
	right: 0;

	a&:focus,
	a&:hover {
		text-decoration: none;
	}
}


// Form headings
.form-heading {
	margin-top: 30px;
}

// Indentation
.form-indent {
	margin-left: 20px;
}

// Alerts
.alert {
	padding: @padding-large-vertical @padding-large-horizontal;
}




// Name fields
// ------------------------------

// old
.item-name .form-control {
	color: @brand-primary;
	margin-bottom: 20px;
}
// new
.item-name-field > .field-ui,
.modal-body > .item-name-field > .field-ui {
	width: 100%;
}




// Disabled fields
.form-control.disabled {
	background-color: @input-bg-disabled;
}


// The note that sits beneath a field
.field-note {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 10px;
	padding: @padding-base-vertical @padding-base-horizontal;

	// FIXME: dangerouslySetInnerHTML is injecting a P tag?
	> p {
		line-height: 1;
		margin: 0;
	}

	// stop notes from wrapping on the shorter fields
	// TODO: this is a bit hacky, we may need more control over notes
	@media (min-width: @screen-sm) {
		.field-size-small > &,
		.field-size-medium > & {
			white-space: nowrap;
		}
	}
}

// Field value. Used for non-editable fields
.field-value {
	background-color: mix(white, @input-bg-disabled, 10%);
	border: 1px solid mix(white, @input-border, 40%);
	border-radius: @input-border-radius;
	color: @input-color;
	display: inline-block;
	font-size: @font-size-base;
	line-height: @line-height-base;
	height: auto;
	min-height: @input-height-base;
	padding: @padding-base-vertical @padding-base-horizontal;
	vertical-align: middle;
	width: auto;
	min-width: 180px;
	
	&.no-value {
		color: @gray-light;
		cursor: default;
	}
}

.field .help-block {
	margin-bottom: 0px;
}

// align label copy with field text
label {
	.inline-align();
	font-weight: normal; // bold's a bit intense
}
.field-label {
	margin: 0;
	
	// so fields don't jump on reveal
	padding-bottom: @padding-base-vertical + 1;
	padding-top: @padding-base-vertical + 1;
}

// label companion
// sits next to a label, keeps him company
.field-label-companion {
	padding-left: @padding-base-horizontal;
}

// limit textareas to be vertically resizable only, set heights
textarea {
	.resizable(vertical);
	min-height: 100px;
	
	&.tall {
		min-height: 200px;
	}
}

input,
textarea {
	&.code {
		font-size: @font-size-small !important;
	}
}

// radios + checkboxes
.radio,
.checkbox {
	margin-bottom: 0;
	margin-top: 0;
}
label.checkbox {
	padding-top: 0;
}

// columns separated fields
// need space when the form collapses
.form-row {
	.col-spacing(0,0 5px);
	.make-row(10px);
	
	@media (max-width: @screen-sm) {
		.col-spacing(0 0 .8em,0 5px);
	}
}

.input-xs {
	.input-size(22px; 1px; 5px; 12px; @line-height-small; @border-radius-small);
}




// Field Sizes
// ------------------------------

.field {
	.make-row();
}
.field-label {
	.make-sm-column(2);
}
// default + large
.field-ui,
.field-size-large {
	.make-sm-column(10);
	.make-md-column(7);
	.make-lg-column(6);
}
.field-size-medium {
	.make-sm-column(5);
	.make-md-column(4);
}
.field-size-small {
	.make-sm-column(3);
	.make-md-column(2);
}
.field-size-full {
	.make-sm-column(9);
	.make-md-column(10);
}




// Field Types
// ------------------------------

// Booleans
.field-type-boolean {
	.field-ui {
		.make-sm-column(9);
		.make-md-column(10);
		
		&.field-indented {
			.make-sm-column-offset(2);
		}
	}
}

// Locations
.field-type-location {
	label {
		margin: 0;
	}
	label+.row {
		margin-top: 12px;
	}
	.field-ui {
		.make-sm-column(12);
		.make-md-column(12);
	}
	.noedit {
		.make-sm-column(9);
		.make-md-column(10);
	}
	.row label {
		padding-top: @padding-base-vertical;
	}
}

// HTML
.field-type-html {
	textarea {
		.form-control;
	}
}



// Code
.field-type-code, .field-type-json {
	.CodeMirror-container {
		.form-control;
		height: auto;
		padding: 0;
		
		&.is-focused {
			@shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@link-color,50%);
			.box-shadow(@shadow);
			border-color: @input-border-focus lighten(@input-border-focus, 5%) lighten(@input-border-focus, 5%);
		}
	}
	.CodeMirror {
		background: transparent;
		border-radius: @input-border-radius;
	}
	.CodeMirror-linenumber{
		margin-left:-30px;
	}
}

// Related Items
.related-item-link {
	.field-value;
	min-width: 0;
	background: white;
	color: #0089cb;
	margin-right: 5px;
	text-decoration: none;
	
	&:hover {
		background-color: #f0f8fc;
		border-color: #80c4e5;
		color: #0c699e;
	};
}

// Messages
.field-message {
	display: none;
	min-height: 30px;

	span {
		display: inline-block;
		background: #f9f9f9;
		border: 1px solid #ccc;
		color: #999;
		margin-right: 10px;
		padding: 5px 10px;
		// .border-radius(3px);
		cursor: default;
	}
}


// Date

.field-type-date .form-control,
.field-type-datetime .form-control{
	display: inline-block;
	margin-right: 5px;
	width: auto;
}




// Inline Fields
// ------------------------------

// widths for fields inside '.form-inline'
.form-inline .field-inline--xs,
.form-inline .field-inline--sm,
.form-inline .field-inline--md,
.form-inline .field-inline--lg,
.form-inline .field-inline--xl {
		display: inline-block;
		position: relative;
		vertical-align: middle;

		> .form-control {
				width: 100%;
		}
}

.form-inline .field-inline--xs { width: 60px; }
.form-inline .field-inline--sm { width: 136px; }
.form-inline .field-inline--md { width: 200px; }
.form-inline .field-inline--lg { width: 300px; }
.form-inline .field-inline--xl { width: 400px; }




// Hacky improvements for desktop
// ------------------------------

@media (min-width: @screen-md) {
	.field-type-date .form-control,
	.field-type-datetime .form-control {
		width: 165px;
	}
	.btn-goto-linked-item {
		.translate(100%, 0);
		display: block;
		margin-left: 0;
		padding: 6px 0;
		position: absolute;
		right: 0;
		top: 0;

		// don't absolutely position if full width
		.field-size-full > & {
			.translate(0,0);
			display: inline-block;
			position: relative;
		}
	}
}




// Field Imports
// ------------------------------

@import "./field-azurefile";
@import "./field-cloudinaryimage";
@import "./field-localfile";
@import "./field-s3file";
@import "./field-localfiles";