.img-controller {
	@include clearfix();
	margin-bottom: 10px;
	margin-top: -10px;

	.tiny-controls {
		right: 0;
		top: 0;
	}

	> span {
		@include clearfix();
		@include font-size(xs);
		font-weight: 500;
		width: 100%;
	}

	.img-wrapper {
		@include input-accent();
		border: solid 1px rgba($primary-color, .4);
		margin-bottom: 10px;
		float: left;
		height: 200px;
		max-width: 100%;
		width: 300px;
		background-color: $light-background-color;
		overflow: hidden;

		img {
			width: 100%;
			height: 200px;
			object-fit: cover;
		}
	}

	.img-dropper {
		@include cover();
		cursor: pointer;
		transition: background-color $standard-transition, box-shadow $standard-transition;
		padding: 10px;

		&.no-image,
		&:hover,
		&:focus {
			div {
				opacity: 1;
			}
		}

		&.no-image {
			box-shadow: inset 0 0 40px 1px rgba($black, .5);
			background-color: rgba($grey, .75);
		}

		&.dragover {
			border: 5px rgba($grey, .8) dotted;
		}

		&:hover {
			box-shadow: inset 0 0 40px 1px rgba($black, .6);
			background-color: rgba($grey, .85);
		}

		&:focus {
			box-shadow: inset 0 0 40px 1px rgba($black, .6);
			background-color: rgba($black, .95);
		}

		div {
			@include hack-center();
			opacity: 0;
			transition: opacity $standard-transition;
			text-align: center;
			color: $white;
			display: block;

		}

		i {
			@include font-size(lg);
			display: block;
		}
	}

	.img-file-upload-button {
		@include font-size(md);
		background-color: $primary-color;
		color: $white;
		width: 60px;
		height: 60px;
		border-top-left-radius: 60px;
		position: absolute;
		right: 0px;
		bottom: 0px;
		text-align: center;
		padding-top: 20px;
		padding-left: 10px;
		cursor: pointer;
		transition: background-color $quick-transition;

		input[type="file"] {
			display: none;
		}

		&:hover {
			background-color: $primary-color-hover;
		}
	}
}

.upload_progress {
	@include cover();
	background-color: rgba($primary-color, .5);
	pointer-events: none;
	transition: none;
	width: 0%;

	&.loading {
		width: 100%;
		transition: width .8s ease;
	}
}