//
// Field Types
// ==============================




// Code
// ------------------------------

.CodeMirror-container {
	.FormInput();
	height: auto;
	padding: 0;
}
.CodeMirror {
	background: transparent;
	border-radius: @border-radius-base;
}




// Colour
// ------------------------------

// NOTE
// fix sizing issues with https://github.com/casesandberg/react-color
// component doesn't play nice with border-box

.e2e-type-color__popover {
	div,
	input,
	span {
		box-sizing: content-box;
	}
}




// Local Files (plural)
// ------------------------------

.field-type-localfiles__filename {
	min-width: 55%;
}

.field-type-localfiles__note {
	background-color: transparent;
	border-color: transparent;
	margin-left: .5em;
	min-width: 0;
}
.field-type-localfiles__note--delete {
	background-color: fade(@app-danger, 5%);
	color: fade(@app-danger, 50%);
}
.field-type-localfiles__note--upload {
	background-color: fade(@app-success, 5%);
	color: fade(@app-success, 50%);
}




// Password
// ------------------------------

// some browsers *cough* Chrome *cough* render heights differently for inputs, buttons, divs etc.
// this stops the height of the label/input row jumping when we reveal the fields

.field-type-password {
	min-height: 2.5em;
}




// Relationship
// ------------------------------

// hide the link on smaller devices because it overlaps the select controls
// TODO: find a better solution for this

@media (max-width: @screen-sm-max) {
	.field-type-relationship .keystone-relational-button {
		display: none;
	}
}