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




// Deviations from Elemental
// ------------------------------


// form label
.FormLabel {
	.u-text-truncate();
}

@media (min-width: @screen-sm) {
	.form-field--secondary > .FormLabel {
		color: @gray-light;
		font-size: @font-size-sm;
		padding-left: 1em;
	}
}


// radios + checkboxes

.Radio,
.Checkbox {
	margin-bottom: 0;
	margin-top: 0;
}




// Headings
// ------------------------------

.form-heading {
	margin-top: 3em;
}




// Relational Button
// sits to the right of a form field
// used for things like clearing an array field or linking to related item
// ------------------------------

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

// Code
/*
-- TODO @jossmac: this update from the master branch may need to be brought forward
.field-type-code {
	.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;
	}
}
*/

.keystone-relational-button {
	.transition( all 140ms );
	border: 1px solid transparent;
	display: block;
	padding: 0 @input-padding-horizontal;
	position: absolute;
	right: 0;

	// use bottom rather than top because the labels stack on smaller devices
	bottom: 0;
}

// position the button using translate so we don't have to worry about widths

@media (min-width: @screen-md) {
	.keystone-relational-button {
		.translate(100%, 0);
		margin-right: -4px; // so it doesn't sit right up against the field

		// provide feedback when user tabs to this element
		&:hover,
		&:focus {
			background-color: white;
			border-color: rgba(0, 0, 0, 0.05);
		}
		&:active {
			background-color: rgba(0, 0, 0, 0.05);
		}
	}
}




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

// large enough to require their own sheet
@import "./field-cloudinaryimage";
@import "./field-localfile"; // also: azurefile, s3file

// all others
@import "./field-types";