@keyframes progress {
	from {}
	to {
		background-position: 40px 0;
	}
}

.ext-strict .x-zarafa-boxfield {
	padding: 0;
}
.x-zarafa-boxfield {
	padding: 0;

	/* clearfix solution found at http://nicolasgallagher.com/micro-clearfix-hack/ */
	ul:before,
	ul:after {
		content: " ";
		display: table;
	}
	ul:after {
		clear: both;
	}

	ul {
		padding: 0 1px;
		/*
		 * We need to set a minumum height because the attachment field by default has no contents and therefor would
		 * have a height of 0
		 */
		min-height: 22px;

		li {
			float: left;
			margin: 1px $padding-small 0 0;
			display: inline;
		}
		li:last-child {
			margin-bottom: 1px;
		}

		li.x-zarafa-boxfield-input-item {
			padding: 0;

			input.x-zarafa-boxfield-input-noborder {
				padding: 0 $padding-medium;
				border: none;
				/* ExtJS adds a gradient as background, here we remove it */
				background-image: none;
			}

			input.x-trigger-noedit {
				cursor: auto;
			}
		}

		.x-zarafa-boxfield-item {
			padding: 0 0 0 $padding-medium;
			background: $grey3;
			border: 1px solid $grey;
			border-radius: 2px;

			.x-zarafa-boxfield-item-icon {
				float: left;
				height: 16px;
				width: 16px;
				margin-right: $padding-medium;
				margin-top: 1px;
			}

			.x-zarafa-boxfield-item-text {
				float: left;
				line-height: 18px;
				overflow: hidden;
			}

			.x-zarafa-boxfield-item-close {
				float: left;
				cursor: pointer;
				padding-left: $padding-medium;
				padding-right: $padding-medium;
				width: 7px;
				height: 7px;
				margin-top: 5.5px;
				/*
				@extend .icon_cross;
				background-position: sprite-position($icons, icon_cross, $offset-y: 0, $offset-x: $padding-medium);
				*/
			}
		}

		.x-zarafa-boxfield-item-hover,
		.x-zarafa-boxfield-recipient-item.x-zarafa-boxfield-item-hover {
			background: $grey4;
			border: 1px solid $grey2;
		}

		.x-zarafa-boxfield-item-focus,
		.x-zarafa-boxfield-recipient-item.x-zarafa-boxfield-item-focus {
			background-color: $light-blue;
		}

		/* the icon for recipient fields */
		.x-zarafa-boxfield-item.x-zarafa-boxfield-recipient-item .x-zarafa-boxfield-item-icon {
			display: none;
		}

		/* Display the icon when the recipient box is resolved */
		.x-zarafa-boxfield-item.x-zarafa-boxfield-recipient-item-resolved .x-zarafa-boxfield-item-icon,
		.x-zarafa-boxfield-item.x-zarafa-boxfield-recipient-item-ambiguous .x-zarafa-boxfield-item-icon {
			display: inline-block;
		}

		.x-zarafa-boxfield-recipient-item-invalid {
			background: transparent;
			border-color: transparent;

			.x-zarafa-boxfield-item-text {
				border-bottom: 2px dotted #e40023;
				line-height: 13px;
				padding-top: 2px;
			}
		}

		/* TODO: the colors for the ambiguous items should be designed */
		.x-zarafa-boxfield-recipient-item-ambiguous {
			background: #f8bf76;
			border-color: #d19c47;
		}
		.x-zarafa-boxfield-recipient-item-ambiguous.x-zarafa-boxfield-item-focus {
			background-color: #3e91f3;
			color: #FFF;
		}

		.x-zarafa-boxfield-item-expand {
			width: 8px;
			height: 8px;
			margin-top: ($font-default-line-height - 8px)/2;
			float: left;
			display: block;
			padding-right: $padding-medium;
			cursor: pointer;
			background-size: 8px;
		}
	}
}

/* Make the whole compositefield for mailcreate and addressbook dialog cursor text and not the first input field */
.zarafa-addressbook-dialog-compositefield,
.zarafa-mailcreatepanel-field-from,
.zarafa-mailcreatepanel-field-from-large,
.zarafa-mailcreatepanel-field-cc,
.zarafa-mailcreatepanel-field-to,
.zarafa-mailcreatepanel-field-bcc {
	.x-form-text.x-zarafa-boxfield {
		cursor: text;
	}

}

.x-zarafa-boxfield-suggestion-cross {
	cursor: pointer;
	float:right;
	height: 7px;
	margin-top: 5px;
	padding:0 6px;
	visibility: hidden;
}
.x-zarafa-boxfield-suggestion-item:hover .x-zarafa-boxfield-suggestion-cross {
	visibility : visible !important;
}

.zarafa-compositefield > .x-box-inner {
	/* this is necessary because otherwise the shadows of the buttons in the new design (2015) will be cut off */
	overflow: visible;
	
	/* we need to align items vertically center in composite field */
	display: flex;
	align-items: center;

	/* flex does not work for absolute position, so reset top and bottom of items to align them vertically center */
	.x-form-item.x-box-item {
		top: auto !important;
		bottom: auto !important;
	} 
}

.zarafa-resizable-compositefield {
	padding-bottom: $padding-medium;
}

/*****************************************************************************
 * Attachment boxfield
 ****************************************************************************/

.x-zarafa-boxfield.zarafa-attachmentfield {
	border: none;

	ul {
		padding: 0;
		/* increase the minimum height because this boxfield has no border */
		min-height: 24px;

		li {
			margin-top: 0;
			margin-bottom: 1px;
		}

		.x-zarafa-boxfield-item {
			.x-zarafa-boxfield-item-icon {
				margin-top: 4px;
			}
			.x-zarafa-boxfield-item-text {
				line-height: 24px;
			}

			.x-zarafa-boxfield-item-close {
				margin-top: 8.5px;
			}
		}

		.x-zarafa-boxfield-item.x-zarafa-boxfield-attachment-item-uploading {
		    background-color: #d5e8f7;
		    background-image: linear-gradient(45deg, transparent, transparent 25%, rgba(255, 255, 255, 0.7) 25%, rgba(255, 255, 255, 0.7) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.7) 100%, transparent);
		    background-size: 40px 40px;
		    animation: progress 1.75s linear infinite;
		}

		.x-zarafa-boxfield-item.x-zarafa-boxfield-attachment-item-invalid {
			background-color: #F3D6D6;
			border-color: #D7B7B7;
		}
	}
}
