// 
// Cloudinary Image
// ==============================




// Common
// ------------------------------

.field-upload {
	position: absolute;
	left: -9999px;
}




// Singular
// ------------------------------

.field-type-cloudinaryimage {
	.image-preview {
		position: relative;
		line-height: 0px;
		float: left;
		margin-right: 10px;
		.placeholder-wrap {
			position: relative;
			height: 100px;
			overflow: hidden;
			
			.placeholder {
				height: 90px;
				opacity: 0.25;
				
				&.no-preview {
					width: 100px;
					display: block;
				}
			}
		}
		.img-loading, .img-uploading, .upload-pending, .delete-pending {
			.square(40px);
			color: rgba(0,0,0,0.66);
			font-size: 40px;
			left: 50%;
			margin: -20px 0 0 -20px;
			position: absolute;
			text-align: center;
			top: 50%;
		}
		.img-thumbnail {
			img {
				display: block;
			}
		}
		&.removed {
			.img-thumbnail {
				img {
					opacity: 0.25;
				}
			}
		}
	}
	
	.image-details {
		overflow: hidden;
		.image-values {
			.field-value {
				width: auto;
				min-width: 1px;
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.image-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
	}
	
	.image-details + .image-toolbar {
		margin-top: @input-vspacing;
	}

	.image-select {
		clear: both; 
		padding-top: 10px;
	}
	
	.upload-queued, .delete-queued, .select-queued {
		.alert {
			margin-right: 10px;
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
		}
	}
}




// Multiple
// ------------------------------

.field-type-cloudinaryimages {
	.image-field {
		width: auto;
		float: left;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 10px;
		
		&.image-upload {
			cursor: pointer;
			.img-thumbnail {
				.img-dropzone {
					width: 90px;
					height: 90px;
					display: block;
					position: relative;
					z-index: 1;
				}
			}
			&:hover,
			&.hover {
				.img-thumbnail {
					border: 1px solid #C8EECD;
					background: #EFFDF0;
					.img-uploading {
						color: #0B851A;
					}
				}
				.image-message {
					text-decoration: underline;
				}
			}
		}
	}
	.image-preview {
		line-height: 0px;
		.placeholder-wrap {
			height: 100px;
			overflow: hidden;
			
			.placeholder {
				height: 90px;
				opacity: 0.25;
				
				&.no-preview {
					width: 100px;
					display: block;
				}
			}
		}
		.img-loading, .img-uploading, .upload-pending, .delete-pending {
			color: #6A6A6A;
			font-size: 23px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			line-height: 100px;
			text-align: center;
			text-shadow: 0 0 50px #FFFFFF;
		}
		.image-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
		.img-thumbnail {
			img {
				display: block;
			}
		}
		&.action {
			.img-thumbnail {
				img {
					opacity: 0.25;
				}
			}
		}
	}
	.image-details {
		.image-message {
			display: inline-block;
			padding: @padding-base-vertical @padding-base-horizontal;
			margin-bottom: 0;
			font-size: 12px;
			font-weight: @btn-font-weight;
			line-height: @line-height-base;
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			margin-left: 0px;
			font-size: 12px;
			width: 100%;
		}
	}
	.field-value {
		width: auto;
		float: left;
		margin-right: 10px;
		margin-bottom: 15px;
	}
	.upload-queued,
	.delete-queued {
		margin-left: 10px;
	}
	.btn-cancel {
		margin-left: 0px;
		font-size: 12px;
		width: 110px;
		text-align: center;
		width: 100%;
	}
	.images-toolbar {
		margin-top: 0;
		.alert {
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
			margin-bottom: 0px;
		}
	}
	.sortable-placeholder {
		border: 1px dashed #777;
		background: none;
		margin-top: 0px;
		margin-left: 3px;
		margin-right: 12px;
		margin-bottom: 0px;
		float: left;
	}
}