$maxImageWidth: $inspectorWidth - $defaultMargin * 2;
$maxImageHeight: $maxImageWidth / 4 * 3;

.neos-inspector-image {
	min-width: $inspectorWidth - $defaultMargin * 2;

	.neos-button {
		padding: 0 $relatedMargin;
		height: $wideMargin;
		line-height: $wideMargin;
		font-size: 13px;

		&:focus {
			height: $wideMargin - 2;
			line-height: $wideMargin - 4;
		}

		&-icon {
			width: $wideMargin;

			&:focus {
				height: $wideMargin;
				line-height: $wideMargin;
				outline: 0;
			}
		}
	}

	.typo3-fileupload-dropzone {
		&.typo3-fileupload-dropzone-active,
		&.typo3-fileupload-dropzone-hover {
			width: $maxImageWidth + 2px;
			height: $maxImageHeight + 2px;
			margin-bottom: $defaultMargin - $tightMargin;
			position: relative;

			&:before {
				@extend .fas;
				color: #fff;
				content: fa-content($fa-var-arrow-down);
				position: absolute;
				top: 50%;
				font-size: $unit;
				line-height: $unit;
				margin-top: -($unit / 2);
				width: 100%;
				text-align: center;
			}

			.neos-inspector-image-thumbnail {
				border-color: #fff;
			}

			.neos-inspector-image-thumbnail-inner {
				display: none;
			}
		}

		&.typo3-fileupload-dropzone-hover {
			background-color: $blue;

			.neos-inspector-image-thumbnail {
				border-style: solid;
			}
		}
	}

	.neos-inspector-image-thumbnail {
		position: relative;
		border: 1px dashed $grayMedium;
		margin-bottom: $defaultMargin - $tightMargin;
		width: $maxImageWidth;
		height: $maxImageHeight;
		display: table;

		.neos-inspector-image-loadingindicator {
			z-index: 1;
			position: absolute;
			left: 67px;
			top: 67px;
		}

		.neos-inspector-image-thumbnail-inner {
			display: table-cell;
			vertical-align: middle;
			text-align: center;

			&.neos-inspector-image-thumbnail-cropped {
				text-align: left;
				overflow: hidden;

				img {
					max-width: none;
					max-height: none;
				}
			}

			img {
				max-width: $maxImageWidth;
				max-height: $maxImageHeight;

				&:not(.neos-inspector-image-thumbnail-dummy) {
					cursor: pointer;
				}
			}
		}
	}

	.neos-inspector-image-upload,
	.neos-inspector-image-width {
		padding-bottom: $defaultMargin - $tightMargin;

		.neos-inspector-image-upload-button,
		.neos-inspector-image-crop-button {
			float: right;
			margin-left: 4px;
		}
	}
}
