//  BASE VARS
//----------------------------------------------------------------
$fontHelvetica: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
$boxHeaderGradient: 3% 10%;
$boxHeaderGradientDark: 10% 20%;
$boxHeaderGradientBlue: #2a95c5 #21759b;


// Editor button
.mce_layerslider_button,
.mce-i-layerslider_button {
	font: 400 20px/1 dashicons !important;
	padding: 0;
	vertical-align: top;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: -2px;
	padding-right: 2px;
}

span.mce_layerslider_button:before,
.mce-i-layerslider_button:before {
	content: "\f233";
}

.mce-layerslider-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 159900;
	background: #000;
	opacity: 0.7;
}


.mce-layerslider-window {
	position: fixed;
	top: 30px;
	bottom: 30px;
	left: 30px;
	right: 30px;
	z-index: 160000;
	background: white;

	.close-modal {
		position: absolute;
		width: 52px;
		height: 52px;
		top: 0;
		right: 0;
		border-left: 1px solid #ddd;
		text-align: center;
		text-decoration: none;
		color: #666;

		&:hover {
			color: #00a0d2;
		}

		&:before {
			content: "\f158";
			font: 400 20px/1 dashicons;
			line-height: 52px;
			-webkit-font-smoothing: antialiased;
		}
	}

	.header {
		margin: 0;
		padding: 0 0 0 15px;
		border-bottom: 1px solid #ddd;
		font-size: 20px;
		line-height: 50px;
		font-weight: 600;
		color: #23282d;
	}


	.inner {
		position: absolute;
		top: 51px;
		bottom: 61px;
		left: 0;
		right: 0;
		padding: 30px;
		background: #f3f3f3;
		overflow: auto;
	}

	.footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 61px;
		box-sizing: border-box;
		border-top: 1px solid #ddd;
		padding: 15px 16px 0 16px;

		.options {
			float: left;

			strong {
				margin-right: 50px;
			}

			span {

			}

			input {
				width: 110px;
				border-radius: 3px;
			}
		}


		button {
			float: right;
			margin: 0 0 0 10px;
		}
	}

	.slider-item {
		display: inline-block;
		position: relative;
		width: 240px;
		height: 150px;
		outline: 1px solid #f3f3f3;
		border: 5px solid transparent;
		margin: 0 14px 10px 0;
		text-align: left;
		cursor: pointer;

		.selection {
			display: none;
		}

		.no-preview {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			color: #666;

			h5 {
				margin: 35px 0 5px 0;
				font-size: 18px;
			}

			small {
				display: block;
				padding: 0 12px;
				font-size: 12px;
				line-height: 14px;
			}
		}


		&.selected {

			border-color: #0073aa;

			.selection {
				display: block;
				position: absolute;
				z-index: 10;
				top: -12px;
				right: -12px;
				border: 1px solid #0073aa;

				.dashicons {
					width: 24px;
					height: 24px;
					color: white;
					border: 1px solid #fff;
					background: #0073aa;
					font-size: 24px;
					line-height: 24px;
					text-align: center;
				}
			}
		}
	}

	.slider-item-wrapper {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		outline: 1px solid #f3f3f3;


		.preview {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: top center;
			overflow: hidden;
			background-color: #f3f3f3;
			box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05);
		}

		.info {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			height: 26px;
			padding: 0 5px;

			background: rgba(0,0,0,0.5);
			color: white;
			color: rgba(255, 255, 255, 0.8);


			line-height: 26px;
			overflow: hidden;

			transition: opacity 0.2s;

			.name {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}