@import 'atlas-variables';

.taglib-image-selector {
	height: 100%;
	min-height: 100px;
	padding: 0;
	position: relative;
	text-align: center;

	&.drop-enabled .drop-here-info {
		.drop-here-indicator {
			height: 90px;
		}

		.drop-text {
			display: inline-block;
			margin-left: 20px;
			margin-top: 0;
		}
	}

	.progress-wrapper {
		display: none;
		left: 50%;
		max-width: 450px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 50%;

		button {
			margin-top: 20px;
		}

		p {
			font-size: 18px;
			margin: 0;
			text-align: left;

			&.size {
				font-size: 14px;
			}
		}

		.progressbar {
			background: #b0b4bb;
			border-radius: 0;
			height: 6px;
			margin: 5px auto;
			opacity: 0.7;
			width: 100%;
		}
	}

	&.drop-active {
		outline-width: 0;

		.browse-image-controls {
			opacity: 0;
		}

		.selection-status {
			opacity: 0;
		}

		.image-wrapper {
			opacity: 0.15;
		}

		.error-wrapper {
			opacity: 0;
		}

		.change-image-controls {
			display: none;
		}

		.progress-wrapper {
			display: none;
		}
	}

	&.draggable-image {
		&.vertical .current-image {
			left: 0 !important;
			max-height: inherit;
			min-width: 100%;
		}

		&.horizontal .current-image {
			max-width: inherit;
		}

		&.both .current-image {
			max-height: 100%;
			max-width: 100%;
		}

		&.drop-enabled .image-wrapper {
			height: 0;
		}

		.image-wrapper {
			height: 400px;
			overflow: hidden;
			width: 100%;

			@include media-breakpoint-down(sm) {
				height: 150px;
			}
		}
	}

	&.progress-active {
		.change-image-controls {
			display: none;
		}

		.progress-wrapper {
			display: block;
		}

		.image-wrapper {
			opacity: 0.15;
		}

		.browse-image-controls {
			opacity: 0;
		}

		.drop-here-info {
			opacity: 0;
		}

		.selection-status {
			opacity: 0;
		}
	}

	.browse-image-controls,
	.current-image {
		margin: auto;
		max-height: 100%;
		max-width: 100%;
	}

	.browse-image-controls {
		padding: 10px;
		width: 100%;
		z-index: 1;

		.drag-drop-label,
		.browse-image {
			font-size: 16px;
		}

		.drag-drop-label {
			line-height: 35px;
		}

		.file-validation-info {
			margin-top: 15px;
		}
	}

	.change-image-controls {
		background: #fff;
		bottom: 10px;
		padding: 10px;
		position: absolute;
		right: 10px;
	}

	.current-image {
		margin-bottom: 5px;
	}

	.error-wrapper {
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;
	}

	.selection-status {
		background: #fff;
		border-radius: 30px;
		left: 50%;
		opacity: 0;
		padding: 11px 15px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;

		@include transition(opacity 0.2s ease-in-out);
	}

	.yui3-uploader-content {
		display: none;
	}

	&.check-active .selection-status {
		opacity: 1;
		z-index: 0;
	}
}
