//
// Gallery custom field control
//
.convert-control-gallery {
	.convert-plugin-setting-control {
		max-width: 100%;
	}
}

.ci-media-manager-gallery {
	.ci-upload-to-gallery-preview {
		margin: 10px 0;
		padding: 0;
		border: 1px solid $grey-lighter;
		border-radius: 3px 3px 3px 3px;
		display: flex;
		flex-wrap: wrap;
	}

	.ci-upload-to-gallery-preview-text {
		font-size: 14px;
		color: $text-color-light;
	}

	.thumb + .ci-upload-to-gallery-preview-text {
		display: none;
	}

	.thumb {
		margin: 5px;
		padding: 3px;
		border: 1px solid $border-color;
		border-radius: $border-radius-base;
		width: calc(33.333% - 18px);
		height: auto;
		position: relative;
		overflow: hidden;
		line-height: 0;

		@media (min-width: 1500px) {
			width: calc(25% - 18px);
		}

		.close {
			background-color: $white;
			background-position: -96px 4px;
			border-radius: $border-radius-base;
			border-width: 0;
			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
			color: $text-color;
			display: none;
			font-size: 20px;
			line-height: 20px;
			padding: 0;
			position: absolute;
			right: 5px;
			text-align: center;
			text-decoration: none;
			top: 5px;
			height: 21px;
			width: 21px;
		}

		&:hover .close {
			display: block;
		}
	}

	.thumb img {
		width: 100%;
	}

	.ci-upload-to-gallery-preview p {
		margin: 5px;
		text-align: center;
	}

	.ci-upload-preview {
		.upload-preview {
			display: block;
			max-width: 100px;
			position: relative;

			img {
				border-radius: $border-radius-base;
				width: 100px;
				height: 100px;
				position: relative;
				overflow: hidden;
			}

			.close {
				background-color: $white;
				background-position: -96px 4px;
				border-radius: 3px 3px 3px 3px;
				border-width: 0;
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
				color: $text-color;
				display: none;
				font-size: 20px;
				line-height: 20px;
				padding: 0;
				position: absolute;
				right: 5px;
				text-align: center;
				text-decoration: none;
				top: 5px;
				height: 21px;
				width: 21px;
			}

			&:hover .close {
				display: block;
			}
		}
	}
}