@import 'utilities';

.qs-media{
	.qs-container{
		padding: 0;
		background: transparent;
	}

	&.single{
		.qs-container{
			margin: 0;
			border-top: none;
		}

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

	&.multiple{
		.qs-preview{
			float: left;
			padding: 5px 0;
			margin: 0;
			font-style: italic;

			img{
				vertical-align: middle;
				margin-right: 1em;
			}
		}
		&.media-image{
			.qs-item{
				float: left;
				width: 156px;
				padding: 10px 10px 0 0;
				border: none;

				&:before{
					content: none;
				}

				&:hover .qs-delete{
					opacity: 1;
				}
			}
				.qs-preview{
					float: none;
					display: block;
					padding: 2px;
					border: 1px solid #eee;
				}
				.qs-delete{
					float: none;
					position: absolute;
					bottom: 3px;
					left: 3px;
					width: 150px;
					border-radius: 0;
					opacity: 0;
					@include transition(opacity .2s linear);
				}
		}
	}

	&.gallery{
		img{
			float: left;
			margin: 4px 4px 0 0;
			padding: 2px;
			border: 1px solid #ddd;
		}
		.qs-preview{
			@extend %clearfix;
			margin: 6px 0 0;
			padding: 0;
		}
	}
}

.value-empty .qs-clear {
	display: none;
}