@bigfishtv/cockpit/styles/components/image.less

.images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: -@padding-xsmall;

	.image {
		flex: 0 0 auto;
		padding: @padding-xsmall;
	}
}

.image {
	position: relative;
	margin: 0;
	width: 100%;
	
	@media @medium-up {

		.toolbar {
			opacity: 0;
		}

		&:hover {

			.toolbar {
				opacity: 1;
			}
		}

		&.dragging {

			.toolbar {
				opacity: 0;
			}
		}

	}
	
	&.dragging {

		> * {
			opacity: 0.5;
		}
	}

	&.selected {

		.media {
			outline: 1px solid @primary;
			box-shadow: 0px 0px 2px 2px @primary;
		}
	}

	.media-transparent-pattern {
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAEklEQVQI12Pg50egDx/gCJc4ACpfD/FPL9nLAAAAAElFTkSuQmCC");
	}

	.media-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: @padding-small;
	}

	.media-inner-title {
		margin-top: 0.6rem;
		.font-size(1);
		line-height: @line-height-medium;
		.truncate();
	}
}

.image-inner {
	position: relative;
}

.image-full {
	display: block;
	width: 100%;
}

// Image Uploading
.image-uploading {
	position: relative;
	width: 100%;
	height: 100%;
}

.image-uploading-overlay {
	position: absolute;
	z-index: 500;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: fade(@black, 70%);
}

.image-uploading-overlay-content {
	.center();
	color: white;
	text-align: center;
}