@charset "utf-8";
@import "var";

.#{$namespace}-item {
	&[rel] {
		.#{$namespace}-content {
			display: block!important;
			position: absolute !important;
			left: 5px;
			top: 5px;
			bottom: 5px;
			right: 5px;
			padding: 30px 0;
		}
		.#{$namespace}-drag-drop-upload {
			opacity: 0;
			z-index: -1;
		}
		.#{$namespace}-box {
			top: 0!important;
			opacity: 1!important;
		}
		img { opacity: 1!important;}
	}
	@for $i from 1 through 100 {
		&[rel="#{$i}"] {
			.#{$namespace}-progress {
				display: block !important;
				.file-progress {
					span {
						width: percentage(0.01 * $i)
					}
				}
			}
		}
	}
}

.#{$namespace}-wrapper .form-input-error-message { font-size: 100%; font-weight: normal; }

.#{$namespace}-switcher {
	border-bottom: 1px solid #ddd;
	@media all and #{$phone} {
		display: none;
	}
	ul {
		margin: 0 0 -1px 0;
		li {
			display: inline-block;
			margin: 0 0 0 -5px;
			@media all and #{$phone} {
				float: left;
				width: 33.3333333%;
				margin: 0;
			}
			&:first-child {
				margin: 0;
			}

			a {
				display: block;
				border: 1px solid #ddd;
				color: #9b9aa2;
				font-size: 14px;
				cursor: pointer;
				padding: 15px 30px;
				position: relative;

				@media all and #{$phone} {
					padding: 7px 5px;
					font-size: 10px;
					display: block;
					text-align: center;
				}
				&.active {
					color: #5cb55c;
					border-color: #5cb55c;
					z-index: 2;
				}
			}
		}
	}
}

.#{$namespace}-box,
.#{$namespace}-action-change { display: none }

.#{$namespace}-wrapper {
	padding: 0!important;

	.#{$namespace}-heading {
		padding: 0 0 10px 0;
	}

	img {
		float: none;
		display: inline-block;
	}

	.#{$namespace}-body {

		.#{$namespace}-group {
			margin: 0 -5px;
			position: relative;
			clear: both;
			&:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }


			.ui-state-highlight {
				height: 100px;
				background: rgba(92,184,92,1);
				float: left;
				width: 100%;
			}

			.#{$namespace}-item {
				position: relative;
				width: 100%;
				&.ui-sortable-helper {
					background: rgba(92,184,92,0.5);
				}
				.#{$namespace}-item-delete-message {
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					position: absolute;
					z-index: 999;
					color: #fff;
					background: rgba(113,118,126,.8);
					display: none;

					> div {
						position: absolute;
						left: 50%;
						top: 50%;
						@include transform(translate(-50%,-50%));

						p {
							font-size: 14px;
						}

						a {
							font-size: 12px;
							color: #fff;
							border: 1px solid #b4b6b9;
							padding: 6px 7px;

							i {
								margin: 0;
								position: relative;
								top: -1px;
							}
							
							&:hover {
								border-color: #fff;
							}
						}
					}

				}

				.#{$namespace}-item-content {
					position: relative;
					border: 1px solid #b4b6b9;
					
					overflow: hidden;
					&:after {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						content: '';
						background: rgba(0,0,0,0);
						@include transition(all .3s ease);
					}

					.#{$namespace}-drag {

						> div {
							width: 21px;
							height: 21px;
							position: relative;
							cursor: move;
							display: inline-block;

							span {
								width: 3px;
								height: 3px;
								display: block;
								position: absolute;
								background: #a8a9b2;
								&:nth-child(1) { left: 0; }
								&:nth-child(2) { left: 6px; }
								&:nth-child(3) { left: 12px; }
								&:nth-child(4) { left: 18px; }
								&:before {
									width: 3px;
									height: 3px;
									background: #a8a9b2;
									content: '';
									position: absolute;
									left: 0;
									top: 6px;
								}
								&:after {
									width: 3px;
									height: 3px;
									background: #a8a9b2;
									content: '';
									position: absolute;
									left: 0;
									top: 18px;
								}
								i {
									width: 3px;
									height: 3px;
									display: block;
									position: absolute;
									background: #a8a9b2;
									left: 0;
									top: 12px;
								}
							}
						}

					}

					.#{$namespace}-object {
						&:after {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							content: '';
							background: rgba(0,0,0,0);
							@include transition(all .3s ease);
							overflow: hidden;
						}

						img {
							width: 100%;
							height: auto;
							display: block;
							}

						> img {
							position: relative;
							z-index: 0;
						}
					}

					.#{$namespace}-caption {

						.#{$namespace}-item-field {
							position: relative;

							input {
								height: 38px;
								font-size: 14px;
								color: #555;
								width: 100%;
								font-family: sans-serif;
								border: 1px solid #cdcdcd;
								padding: 5px 10px 6px 10px;
								
							}

							&.with-unit {
								input {
									padding: 5px 75px 6px 10px;
								}

								span {
									width: 65px;
									height: 100%;
									top: 0;
									right: 0;
									position: absolute;
									border-left: 1px solid #cdcdcd;
									background: #f6f7f8;
									color: #8e9398;
									padding: 11px 0 0 0;
									font-size: 14px;
									text-align: center;
									@include borderRadius(0 3px 3px 0);
								}
							}
						}

						.#{$namespace}-item-actions {
							i {
								line-height: 2;
								margin: 0;
							}
						}
					}

				}

				.#{$namespace}-content {
					display: none;
					position: relative;
					border: 1px solid #d8d2d2;
					.#{$namespace}-progress {

						.upload-file-preview-block {
							background: #e8e8e8;
							position: relative;
							display: inline-block;
							vertical-align: middle;
							

							i {
								color: #a9aaac;
								font-size: 20px;
								position: absolute;
								top: 50%;
								left: 50%;
								@include transform(translate(-50%,-50%));
							}
						}

						.upload-file-progress-block {
							display: inline-block;
							vertical-align: middle;

							p {
								font-size: 12px;
								color: #aaa;
								padding: 0 0 5px 0;
							}

							.file-progress {
								width: 100%;
								height: 10px;
								background: #e6e6e6;
								position: relative;
								
								span {
									height: 10px;
									position: absolute;
									left: 0;
									top: 0;
									bottom: 0;
									background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
									background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
									background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
									background-size: 40px 40px;
									animation: progress-bar-stripes 1s linear infinite;
									
									@include transition(width 0.6s ease);
								}
							}
						}
					}

					.#{$namespace}-error-message {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						z-index: 99;
						border: 1px solid #d9534f;
						background: rgba(215,57,52,.7);
						display: none;

						> div {
							position: absolute;
							left: 50%;
							top: 50%;
							@include transform(translate(-50%,-50%));

							p {
								font-size: 14px;
								padding: 6px 0 0 0;
								color: #fff;
							}

							a {
								font-size: 12px;
								color: #fff;
								border: 1px solid #dfa3a1;
								padding: 6px 7px;

								i {
									margin: 0;
									position: relative;
									top: -1px;
								}

								&:hover {
									border-color: #fff;
								}
							}
						}

					}

				}

				&.#{$namespace}-item-delete {

					.#{$namespace}-item-delete-message {
						display: block;
					}

					.#{$namespace}-caption {
						display: none;
					}

					.#{$namespace}-item-content {
						&:after {
							display: none;
						}
					}

					.#{$namespace}-item-actions {
						display: none;
					}

					.#{$namespace}-object {
						&:after {
							display: none;
						}
					}

				}

				.#{$namespace}-drag-drop-upload {
					position: relative;
					width: 100%;
					background: #f5f5f5;
					border: 1px dashed #cdcdcd;
					cursor: pointer;
					@include transition(all .3s ease);
					text-align: center;
					.#{$namespace}-item-content {
						border: none !important;

					}
					.#{$namespace}-content {
						border: none !important;
					}
					.#{$namespace}-drop-text {
						position: absolute;
						left: 0;
						top: 0;
						padding: 20px;
						text-align: center;
						span, .fa {
							position: relative;
							z-index: 2;
							font-size: 16px;
							@include transition(all 0.2s ease);
						}
					}
				}
				&:hover {
					.#{$namespace}-drag-drop-upload {
						.#{$namespace}-drop-text {
							span, .fa {
								color: #fff;
							}
						}
					}

					.#{$namespace}-object {
						&:after {
							background: rgba(0,0,0,.6);
						}
					}

					.#{$namespace}-item-content {
						.#{$namespace}-caption {
							.#{$namespace}-item-actions {
								opacity: 1;
							}
						}

					}
				}
			}
		}

	}



	// List view
	&.#{$namespace}-list-view {

		.#{$namespace}-group {

			.#{$namespace}-item {
				width: 100%;
				display: inline-block;
				padding: 0 5px;
				margin: -1px 0 0 0;

				.#{$namespace}-item-delete-message {
					> div {
						width: 93%;

						p {
							display: inline-block;
							padding: 6px 0 0 0;
						}

						a {
							float: right;

							i {
								margin: 0;
								position: relative;
								top: -1px;
							}

							&:hover {
								border-color: #fff;
							}
						}
					}
				}

				.#{$namespace}-item-content {
					padding: 10px 0;

					&:after {
						display: none;
					}

					.#{$namespace}-drag {
						width: 4%;
						text-align: center;
						display: inline-block;
						vertical-align: middle;

					}

					.#{$namespace}-object {
						width: 8%;
						display: inline-block;
						vertical-align: middle;
						margin: 0 0 0 -5px;

						&:after {
							display: none;
						}

						img {
							width: 80%;
							
						}
					}

					.#{$namespace}-caption {
						width: 88%;
						display: inline-block;
						vertical-align: middle;
						margin: 0 0 0 -5px;

						.#{$namespace}-item-field {
							width: 30%;
							float: left;
							vertical-align: middle;
							@media all and #{$tablet} {
								width: 35%;
							}
							&.with-unit {
								padding: 0 5px 0 0;
								span {
									border: 1px solid #cdcdcd;
									right: 5px;
								}
							}
						}

						.#{$namespace}-item-info {
							width: 28%;
							font-size: 14px;
							color: #555;
							float: left;
							vertical-align: middle;
							padding: 0px 30px;
							@media all and #{$tablet} {
								width: 15%;
								padding: 0 5px;
							}
							p {
								display: inline-block;
								&:last-child {
									float: right;
									text-align: right;
								}
								&:nth-child(n+1) {
									@media all and #{$tablet} {
										display: block;
										float: none;
										text-align: left;
										font-size: 12px;
									}
								}
							}
						}

						.#{$namespace}-item-actions {
							width: 10%;
							float: right;
							vertical-align: middle;
							@media all and #{$tablet} {
								width: 15%;
							}
							.file-action {
								display: inline-block;
								cursor: pointer;
								padding: 0 4px;
								label {
									padding: 0;
									cursor: pointer;
								}								i {
									color: #848a95;
									@include transition(all .3s ease);
									&:hover {
										opacity: .6;
									}
								}

							}
						}

					}

				}

				.#{$namespace}-content {
					padding: 10px;

					.#{$namespace}-progress {

						.upload-file-preview-block {
							width: 80px / 1260px * 100%;
							height: 60px;
							position: relative;
							

							i {
								color: #a9aaac;
								font-size: 20px;
								position: absolute;
								top: 50%;
								left: 50%;
								@include transform(translate(-50%,-50%));
							}
						}

						.upload-file-progress-block {
							width: 80%;
							margin: 0 0 0 20px;
						}
					}

					.#{$namespace}-error-message {
						> div {
							width: 93%;

							p {
								display: inline-block;
							}

							a {
								float: right;

								i {
									margin: 0;
									position: relative;
									top: -1px;
								}
							}
						}
					}

				}

				&:nth-child(2n+1) {
					.#{$namespace}-item-content {
						background: #f7f7f7;
					}
					.#{$namespace}-content {
						background: #f7f7f7;
					}
				}

				.#{$namespace}-drag-drop-upload {
					margin: 0 0 10px 0;
					text-align: left;
					padding: 0;

					.#{$namespace}-item-content {
						padding: 0;
						&:after {
							display: block;
						}

						.#{$namespace}-object {
							width: 104px;
							display: inline-block;
							vertical-align: middle;
							margin: 0 0 0 -5px;

							&:after {
								display: block;
							}

							img {
								width: 80%;
								
							}
						}
					}
					.#{$namespace}-drop-text {
						height: 100%;
						padding: 25px 0 0 150px ;
						text-align: left;
					}
				}
			}

		}

	}

	// Grid view
	&.#{$namespace}-grid-view {

		.#{$namespace}-group {

			.ui-state-highlight {
				@media all and #{$laptop} {
					width: 50%;
				}
				@media all and #{$desktop} {
					width: 33.333333%;
				}

				@media all and #{$tablet} {
					width: 100%;
				}
			}

			.#{$namespace}-item {
				padding: 5px;
				float: left;

				@media all and #{$laptop} {
					width: 50%;
				}
				@media all and #{$desktop} {
					width: 33.333333%;
				}

				@media all and #{$tablet} {
					width: 100%;
				}

				.#{$namespace}-item-delete-message {
					background: rgba(113,118,126,.95);

					> div {
						width: 96%;
						text-align: center;

						p {
							display: block;
							text-align: center;
						}

						a {
							display: inline-block;
							margin: 8px 0 0 0;

							i {
								margin: 0;
								position: relative;
								top: -1px;
							}
						}
					}
				}

				.#{$namespace}-item-content {
					background: #fff;
					
					@include boxShadow(0px 3px 4px 0px rgba(0, 0, 0, 0.05));

					&:after {
						display: none;
					}

					.#{$namespace}-drag {
						position: absolute;
						left: 10px;
						top: 10px;
						z-index: 99;
						opacity: 0;
						> div {
							span {
								background: rgba(255,255,255,.6);
								&:before, &:after, i {
									background: rgba(255,255,255,.6);
								}
							}
						}
					}

					.#{$namespace}-object {
						width: 45%;
						display: inline-block;
						vertical-align: top;
						position: relative;

						@media all and #{$phone} {
							width: 100%;
						}

						&:after {
							@include borderRadius(2px 0 0 2px);
						}

						img {
							@include borderRadius(2px 0 0 2px);
						}
					}

					.#{$namespace}-caption {
						width: 55%;
						display: inline-block;
						vertical-align: top;
						margin: 0 0 0 -5px;
						padding: 10px;

						@media all and #{$phone} {
							width: 100%;
						}
						.#{$namespace}-item-field {
							margin: 0 0 5px 0;

							input {
							}

							&.with-unit {
								span {
									border: 1px solid #cdcdcd;
								}
							}
						}

						.#{$namespace}-item-info {
							font-size: 12px;
							color: #948e8e;
							padding: 5px 0 0 0;

							p {
								display: inline-block;
								&:last-child {
									float: right;
									text-align: right;
								}
							}
						}

						.#{$namespace}-item-actions {
							width: 45%;
							position: absolute;
							left: 0;
							top: 50%;
							opacity: 0;
							z-index: 99;
							text-align: center;
							@include transform(translateY(-50%));

							.file-action {
								display: inline-block;
								padding: 0 4px;
								cursor: pointer;
								label {
									padding: 0;
									cursor: pointer;
								}
								i {
									color: #fff;
									line-height: 2;
									@include transition(all .3s ease);
									&:hover {
										opacity: .6;
									}
								}

							}
						}
					}
				}

				.#{$namespace}-content {
					background: #fff;
					
					@include boxShadow(0px 3px 4px 0px rgba(0, 0, 0, 0.05));

					.#{$namespace}-progress {

						.upload-file-preview-block {
							width: 45%;
							height: 130px;

							i {
								font-size: 30px;
							}
						}

						.upload-file-progress-block {
							width: 55%;
							padding: 10px;
							margin: 70px 0 0 -5px;
						}

					}

					.#{$namespace}-error-message {
						> div {
							width: 96%;
							text-align: center;

							p {
								display: block;
								text-align: center;
							}

							a {
								display: inline-block;
								margin: 8px 0 0 0;

								i {
									margin: 0;
									position: relative;
									top: -1px;
								}
							}
						}
					}
				}

				.#{$namespace}-drag-drop-upload {
					padding: 0;
					.#{$namespace}-drop-text {
						position: absolute;
						left: 0;
						top: 0;
						padding: 20px;
						width: 100%;
						text-align: center;
						span, .fa {
							position: relative;
							z-index: 2;
							font-size: 16px;
							@include transition(all 0.2s ease);
						}
					}

					.#{$namespace}-object {
						width: 100%;
						text-align: center;
						img {
							width: 45%;
							float: none;
							display: inline-block;
						}
					}
				}
				&:hover {
					.#{$namespace}-drag {
						opacity: 1;
					}
				}
			}
		}
	}

	// Gallery view
	&.#{$namespace}-gallery-view {

		.#{$namespace}-group {

			.ui-state-highlight {
				@media all and #{$tablet} {
					width: 50%;
				}

				@media all and #{$laptop} {
					width: 33.3333333%;
				}
				@media all and #{$desktop} {
					width: 25%;
				}


				@media all and #{$smallTablet} {
					width: 100%;
				}

				@media all and #{$phone} {
					width: 100%;
				}
			}

			.#{$namespace}-item {
				padding: 5px;
				float: left;

				@media all and #{$tablet} {
					width: 50%;
				}

				@media all and #{$laptop} {
					width: 33.3333333%;
				}
				@media all and #{$desktop} {
					width: 25%;
				}


				@media all and #{$smallTablet} {
					width: 100%;
				}

				@media all and #{$phone} {
					width: 100%;
				}

				.#{$namespace}-item-delete-message {
					> div {
						width: 96%;
						text-align: center;

						p {
							display: block;
							text-align: center;
						}

						a {
							display: inline-block;
							margin: 8px 0 0 0;

							i {
								margin: 0;
								position: relative;
								top: -1px;
							}

							&:hover {
								border-color: #fff;
							}
						}
					}
				}

				.#{$namespace}-item-content {

					.#{$namespace}-drag {
						position: absolute;
						right: 10px;
						top: 10px;
						z-index: 99;
						opacity: 0;
						> div {
							span {
								background: rgba(255,255,255,.6);
								&:before, &:after, i {
									background: rgba(255,255,255,.6);
								}
							}
						}
					}

					.#{$namespace}-object {
						img {
							
						}
					}

					.#{$namespace}-caption {
						width: 80%;
						opacity: 0;
						position: absolute;
						top: 50%;
						left: 50%;
						z-index: 99;
						padding: 25px 0 0 0;
						@include transform(translate(-50%,-50%));

						.#{$namespace}-item-field {
							margin: 0 0 5px 0;

							input {
								border: none;
							}
						}

						.#{$namespace}-item-info {
							width: 100%;
							font-size: 12px;
							color: #fff;
							text-align: center;
							position: absolute;
							top: 0;

							p {
								display: inline-block;
								padding: 0 10px;
							}
						}

						.#{$namespace}-item-actions {
							text-align: center;
							padding: 10px 0 0 0;

							.file-action {
								display: inline-block;
								padding: 0 4px;
								cursor: pointer;
								label {
									padding: 0;
									cursor: pointer;
								}

								i {
									color: #fff;
									@include transition(all .3s ease);
									&:hover {
										opacity: .6;
									}
								}

							}
						}
					}

					&:hover {
						.#{$namespace}-drag {
							opacity: 1;
						}

						.#{$namespace}-caption {
							opacity: 1;
						}
					}

				}

				.#{$namespace}-content {
					background: #fff;
					
					@include boxShadow(0px 3px 4px 0px rgba(0, 0, 0, 0.05));

					.#{$namespace}-progress {

						.upload-file-preview-block {
							width: 100%;
							position: relative;
							z-index: 80;

							i {
								font-size: 40px;
							}
						}

						.upload-file-progress-block {
							width: 90%;
							position: absolute;
							z-index: 90;
							left: 50%;
							bottom: 20px;
							@include transform(translateX(-50%));

							.file-progress {
								background: #fff;
							}
						}

					}

					.#{$namespace}-error-message {
						> div {
							width: 96%;
							text-align: center;

							p {
								display: block;
								text-align: center;
							}

							a {
								display: inline-block;
								margin: 8px 0 0 0;

								i {
									margin: 0;
									position: relative;
									top: -1px;
								}
							}
						}
					}
				}

				.#{$namespace}-drag-drop-upload {
					padding: 0;
					
					.#{$namespace}-drop-text {
						position: absolute;
						left: 0;
						top: 0;
						padding: 20px;
						width: 100%;
						text-align: center;
						span, .fa {
							position: relative;
							z-index: 2;
							font-size: 16px;
							@include transition(all 0.2s ease);
						}
					}
				}

			}

		}

	}


}

.#{$namespace}-popup {
	position: fixed; top: 50%; left: 50%; @include transform(translate(-50%, -50%)); width: 768px; max-width: 90%;
}



/* === PROGRESS BAR ANIMATION === */
@-webkit-keyframes progress-bar-stripes {
	from {
		background-position: 40px 0;
	}
	to {
		background-position: 0 0;
	}
}
@keyframes progress-bar-stripes {
	from {
		background-position: 0 40px;
	}
	to {
		background-position: 0 0;
	}
}