.neos-secondary-inspector {
	position: fixed;
	top: $unit;
	bottom: 0;
	z-index: 10014;
	// this is set to 150% instead to 100% because Firefox still shows the
	// secondary inspector with the width of $inspectorWidth
	left: 150%;
	@include box-sizing(border-box);
	width: 100%;
	background-color: $grayDark;

	@include transition-property('top, left, padding-left, padding-right');
	@include transition-duration(.2s);

	&.neos-secondary-inspector-open {
		left: 0;
	}

	@import "Editors/HtmlEditor";

	.neos-inspector-panel-open & {
		padding-right: $inspectorWidth;
	}

	.neos-edit-preview-panel-open & {
		top: $editPreviewPanelHeight + $unit + 2;
	}

	.neos-navigate-panel-open & {
		padding-left: $navigatePanelWidth;
	}

	.neos-menu-panel-open.neos-menu-panel-sticky & {
		padding-left: $menuButtonWidth;
	}

	.neos-menu-panel-open.neos-menu-panel-sticky.neos-navigate-panel-open & {
		padding-left: $menuButtonWidth + $navigatePanelWidth - 1px;
	}

	> div {
		height: 100%;
		> div {
			height: 100%;
		}
	}
}

.neos-secondary-inspector-image-crop .jcrop-holder {
	margin: $unit auto;
}