@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";

.cherry-ui-elements-lock{
	opacity: 0.5;
	cursor: no-drop;
	pointer-events: none;
	filter: grayscale( 100% );
}
.cherry-ui-container {
	margin: 10px 0 20px 0;
}
label.cherry-label {
	margin: 0 0 5px 0;
	display: block;
}
.cherry-ui-media-wrap {
	.cherry-upload-preview{
		display: block;
		margin: 0 0 5px 0;
		.cherry-image-wrap {
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 120px;
			height: 120px;
			.inner {
				width: 110px;
				height: 110px;
				margin: 3px;
				position: relative;
				border: 2px solid $blue_color;
				border-radius: $border_radius_extra_small;
				overflow: hidden;
				.preview-holder {
					width: 100%;
					height: 100%;
					position: relative;
					background: $bg_color;
					box-sizing: border-box;
						.centered {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							transform: translate(50%,50%);
						}
						img {
							max-width: 100%;
							height: auto;
							transform: translate(-50%,-50%);
						}
						span {
							width: auto;
							height: auto;
							font-size: 60px;
							transform: translate(-50%,-50%);
						}
				}
				.title {
					position: absolute;
					width: 100%;
					padding: 5px 0;
					bottom: 0;
					left: 0;
					color: #fff;
					background: rgba(41, 143, 252, 0.8);
					text-align: center;
					font-size: 11px;
					overflow: hidden;
				}
			}
			&:hover {
				.cherry-remove-image {
					display: block;
				}
			}
		}
		.cherry-media-thumb-sortable-placeholder {
			width: 112px;
			height: 112px;
			margin: 3px;
			vertical-align: top;
			border: 1px dashed $border_color;
			display: inline-block;
			background-color: $bg_color;
		}
	}
	.upload-button {
		float: left;
	}
	.cherry-remove-image {
		width: 30px;
		height: 30px;
		color: $remove_color;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		text-decoration: none;
		outline: 0;
		display: none;
			i {
				width: 30px;
				height: 30px;
				font-size: 30px;
			}
			&:hover {
				color: darken( $remove_color, 10% );
			}
	}
	.cherry-bgsetting {
		float: left;
		width: 32%;
		margin-right: 1%;
			&:nth-child(3n+1) {
				width: 34%;
				margin-right: 0;
			}
			select {
				margin-bottom: 10px;
			}
	}
}

.button-default_ {
	@include button_base();
	@include secondary_button();
}