/**
 * Mixins.
 */
@mixin clearfix {
	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

/**
 * Header configurator button
 */
#customize-theme-controls {
	.sp-header-open {
		float: right;
		cursor: pointer;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		outline: none;

		&:before {
			content: "\f132";
			display: inline-block;
			position: relative;
			left: -2px;
			top: -1px;
			font: normal 20px/1 dashicons;
			vertical-align: middle;
			-webkit-transition: all 0.2s;
			transition: all 0.2s;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&.sp-header-active {
			background: #eee;
			border-color: #929793;
			color: #32373c;
			-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
			box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

			&:before {
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}
}

#sp-header-configurator {
	position: absolute;
	overflow-y: visible;
	overflow-x: hidden;
	top: 0;
	bottom: 0;
	left: -801px;
	width: 800px;
	margin: 0;
	z-index: 4;
	background: #eee;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	border-right: 1px solid #ddd;
	box-sizing: border-box;

	.sp-header-section-title {
		height: 45px;
		border-bottom: 1px solid #ddd;

		h1 {
			margin: 0;
			padding: 0 12px;
			font-size: 17px;
			font-weight: 200;
			line-height: 45px;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}

.sp-header-gridstack-wrapper {
	position: relative;
	width: 100%;
	padding: 12px;
	background: #fff;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #dfdfdf;
	box-sizing: border-box;
	margin-bottom: 12px;

	.sp-header-grid-empty-notice {
		display: none;
		opacity: .5;
		font-size: 12px;
		font-style: italic;
		text-align: center;
		margin: 0;
	}

	&.sp-header-grid-empty {
		.sp-header-grid-empty-notice {
			display: block;
		}
	}
}

.sp-header-gridstack {
	margin-left: -6px;
	margin-right: -6px;

	> .grid-stack-item {
		> .grid-stack-item-content {
			color: #23282d;
			background: #fafafa;
			border: 1px solid #e5e5e5;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
			cursor: move;

			h3 {
				padding: 10px 15px;
				margin: 0;
				font-size: 1em;
				white-space: nowrap;
			}

			.sp-header-widget-delete {
				position: absolute;
				right: 0;
				top: 0;
				display: block;
				width: 35px;
				height: 38px;
				margin-right: 0 !important;
				outline: none;
				cursor: pointer;
				background: #fafafa;
				z-index: 0;
				border: 0;

				&:before {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: -10px;
					width: 10px;
					height: 38px;
					background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
					background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1)));
					background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
					background: linear-gradient(to right, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
				}

				&:after {
					content: '\f335';
					font: normal 20px/1 dashicons;
					color: #a00;
					vertical-align: top;
					speak: none;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					text-decoration: none !important;
					line-height: 38px;
   					margin-left: 5px;
				}

				&:hover {
					&:after {
						color: #f00;
					}
				}
			}
		}

		&:hover {
			> .grid-stack-item-content {
				border-color: #999;
			}
		}
	}
}

.sp-header-components-shelf {
	@include clearfix;
	margin: 0 12px;

	a {
		display: inline-block;
		margin: 0 6px 0 0;
		padding: 10px 15px;
		font-size: 13px;
		background: #fff;
		border: 1px solid #ddd;
		color: #444;
		cursor: pointer;

		&:before {
			content: "\f132";
			display: inline-block;
			position: relative;
			left: -5px;
			margin-right: 2px;
			font: normal 18px/1 dashicons;
			vertical-align: middle;
		}

		&:hover {
			color: #0073aa;
			border-color: #999;
		}
	}
}

body.sp-header-panel-visible {
	.wp-full-overlay.expanded {
		#sp-header-configurator  {
			left: 0;
		}

		.wp-full-overlay-main {
			left: 800px;
		}

		#customize-preview {
			opacity: .4;
		}
	}
}

/**
 * Sticky header
 */
#customize-control-sp_header_sticky_heading {
	margin-bottom: 0;
}