@import "ui-kit/variables";
@import "ui-kit/mixins";

.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: $grey_color_3;
					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 $grey_color_1;
			display: inline-block;
			background-color: $grey_color_3;
		}
	}
	.upload-button{
		float: left;
	}
	.cherry-remove-image{
		width: 30px;
		height: 30px;
		color: $red_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: $red_color_h;
			}
	}
	.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 button_normal();
}
/*.button_{
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	backface-visibility: hidden;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	transform: translateZ(0px);
	transition-duration: 0.5s;
	transition-property: color;
	vertical-align: middle;
	&:hover,
	&:active,
	&:focus {
		outline: none;
	}
}

.button-default_{
	@extend .button_;
	font-size: 13px;
	background-color: #ffffff;
	border: 1px solid #dddcdc;
	border-radius: 3px;
	line-height: 32px;
	margin: 0;
	padding: 0 14px;
	box-shadow: none;
	color: #464646;
	height: auto;
}*/