.dropzone {
	width: 100%;
}

.dropzone--images {
	width: calc(100% + 2rem);
	margin: 0 -1rem;
}

.dropzone--files {
	width: calc(100% + 2rem);
	margin: 0 -1rem;
}

.dropzone--image {
	width: 100%;
}
.dropzone--file {
	width: 100%;
}

.dropzone__box {
	display: inline-block;
	float: left;
	height: 20rem;
	border: 1px solid $color--seashell;
	background: rgba($color--seashell, 0.2);
	position: relative;
	margin: 0 1rem 1rem 0;
	width: 100%;
	cursor: pointer;

	.dropzone--images & {
		width: 22rem;
		margin: 0 1rem 1rem 1rem;
	}

	.dropzone--files & {
		width: 22rem;
		margin: 0 1rem 1rem 1rem;
	}

	.dropzone--image & ,
	.dropzone--file & {
		width: 100%;
		margin: 0;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}

	&:hover {
		.dropzone__box__message {
			opacity: 1;
		}
	}
}
.dropzone__box__message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: auto;
	text-align: center;
	pointer-events: none;
	background: rgba($color--seashell, 0.2);
	padding: 0 1rem 1rem 1rem;

	transition: all 0.3s ease;

	//backface-visibility: hidden;

	font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

	svg {
		font-size: 4rem;
		color: $color--mint;
		display: block;
		margin: 1rem auto;
	}

	.dropzone--image & {
		//opacity: 0.6;
	}

	.dropzone__preview + & {
		top: auto;
		bottom: 1rem;
		transform: translate(-50%, 15%) scale(0.7);
		svg {
			opacity: 0.5;
		}
	}
}

.dropzone__list {
	display: inline;
}
.dropzone__list__item {
	position: relative;
	border: 1px solid $color--seashell;
	background: rgba($color--seashell, 0.2);
	display: inline-block;
	float: left;
	margin: 0 1rem 1rem 0;
	width: 22rem;
	min-height: 20rem;
	max-width: 40rem;
	img {
		max-width: 100%;
		max-height: 18rem;
	}

	&:before {
		display: block;
		color: $color--seashell;
		font-size: 7rem;
		margin: 2rem auto;
		text-align: center;
	}

}

.dropzone__list__item__buttons {
	position: absolute;
	top: 3px;
	right: 3px;
	display: block;
	width: 2.5rem;
}

.dropzone__list__item__button {
	display: inline-block;
	text-align: center;
	width: 2.5rem;
	margin-bottom: 1px;
	background: $color--gray;
	color: $color--white;
	border: none;
	outline: none;
	border-radius: 3px;
	cursor: poiter;
	&:hover {
		color: $color--mint;
	}
}


// buttony pro jeden obrazek
.dropzone__box__buttons {
	@extend .dropzone__list__item__buttons;
}

.dropzone__box__button {
	@extend .dropzone__list__item__button;
}



.dropzone__list__item__infos {
	padding: 3px;
	// in form-item--text
}

.dropzone__list__item__filename {
	// soubory
	display: block;
	width: 100%;
	height: 8rem;
	color: $color--gray;
	text-align: center;
	font-size: 1.1rem;
	svg {
		display: block;
		color: $color--mint;
		margin: 2.5rem auto 1rem auto;
		font-size: 4rem;
	}
}

//nahravani
.dz-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: lighten($color--seashell, 20%);

	opacity: 0;
	transition: all 0.3s linear;

	&.dz-processing {
		opacity: 1;
	}


	.dz-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.dz-details {
		position: absolute;
		bottom: 0;
		left: 0;
		display: inline-block;
		height: auto;
		width: 100%;
		text-align: center;
		pointer-events: none;
		padding: 0 1rem 1rem 1rem;
		background: rgba($color--seashell, 0.6);
	}

	.dz-progress {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background: $color--seashell;
	}
	.dz-upload {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		background: $color--mint;
		width: 0;
		transition: all 0.3s ease-in-out;
	}

	.dz-error-message {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: auto;
		text-align: center;
		pointer-events: none;
		background: rgba($color--seashell, 0.2);
		padding: 0 1rem 1rem 1rem;
		display: none;
	}

	.dz-success-mark,
	.dz-error-mark {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: none;
	}
}

//preview
.dropzone__preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	pointer-events: none;

	svg {
		display: block;
		margin: 2rem auto 1rem auto;
		min-width: 4rem;
		height: 5rem;
		color: $color--mint;
	}

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