.image-input {
	padding: 5em;
	border: 1px solid gray;
	border-radius: 2px;
	display: block;
	cursor: pointer;
	text-align: center;
	font-family: Arial;
	position: relative;

	span.icon-down {
		opacity: 0;
		height: 0;
		transform: scale(0);
		transition: transform .3s, top .3s, color .3s;
		top: 0;
		position: relative;
		color: gray;
	}
}

.image-input .input[type="file"] {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 1000;
}


.image-input > span {
	font-size: 2em;
	color: darkgray;
	display: block;
	text-align: center;
	transition: transform .3s;
	position: relative;
}

.image-input > .info {
	background: white;
}

.image-input > .info > span {
	font-size: .6em;
	transition: .3s;
	color: gray;
	background: white;
}

.image-input.over > .info {
	opacity: 0;
	background: white;
}

.image-input.done {
	border: 2px solid green;
}

.image-input.over {
	border: 2px solid dodgerblue;
}

.image-input.over > span.icon-down {
	top: .8em;
	color: dodgerblue;

	&.add {
		margin: 1em;
	}
}

.image-input.over > span.icon-down, .image-input.ready > span.icon-down, .image-input:hover > span.icon-down {
	transform: scale(1);
	opacity: 1;
	height: 32px;
}

.image-input.over > span.icon-image, .image-input.ready > span.icon-image, .image-input:hover > span.icon-image {
	opacity: 0;
	height: 0;
	transform: scale(0);
}


.image-editor {
	canvas {
		cursor: move;
	}

	.image-editor-view {
		height: 360px;
		border-bottom: 1px solid gray;
		margin-bottom: 6px;
		overflow: hidden;
		position: relative;

		.info {
			top: 50%;
			text-align: center;
			width: 100%;
			position: absolute;
			color: gray;
			background: white;
		}

		.crop {
			position: absolute;
			height: calc(100% - 4px);
			width: calc(100% - 4px);
			background: transparent;
			border: dashed rgba(128, 128, 128, 0.692) 2px;
			border-radius: 2px;
			outline: 1000px rgba(73, 73, 73, 0.459) solid;
			pointer-events: none;

			.handle {
				position: absolute;
				bottom: -6px;
				right: -6px;
				padding: 6px;
				cursor: se-resize;
				transition: color .3s;
				background: white;
				pointer-events: all;
				border: 1px solid gray;

				&:hover {
					color: darkgray;
				}
			}
		}
	}

	.image-editor-list {
		height: 128px + 6px;
		overflow: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}

	.image-editor-block {
		display: inline-block;
		width: 128px;
		height: 130px;
		text-align: center;
		position: relative;
		margin: 0 6px;
		border: 1px solid #9E9E9E;
		border-radius: 2px;
		vertical-align: bottom;
		cursor: pointer;

		.close {
			color: red;
			position: absolute;
			top: 2px;
			right: 6px;
			opacity: 0;
			transition: .3s;

			&:hover {
				transform: scale(1.2);
			}
		}

		&:hover .close {
			opacity: 1;
		}

		img {
			max-width: 100%;
			max-height: 100%;
		}

		label {
			color: rgb(70, 70, 70);
			position: absolute;
			display: block;
			bottom: 0;
			text-overflow: ellipsis;
			overflow: hidden;
			background: rgba(255, 255, 255, 0.582);
			width: 100%;
			max-height: 100%;
		}
	}
}