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


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

.FormLabel {
	.u-text-truncate();
}

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

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

.field-monospace .FormInput {
	font-family: @font-family-monospace;
}

.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-localfile"; // also: azurefile, s3file

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