.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/CodeEditor";

	.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;
	}

	.neos-close {
		@extend .fas;
		position: absolute;
		top: $unit + 1;
		right: 0;
		color: #fff;
		font-size: 18px;
		line-height: 100%;
		width: $unit + 1;
		height: $unit + 1;
		background-color: $grayDark;
		border: 1px solid $grayLight;
		z-index: 10015;
		@include opacity(1);
		@include transition-property(top, right);
		@include transition-duration(.2s);

		&:before {
			content: fa-content($fa-var-times);
		}

		&:hover {
			background: $blue;
		}

		.neos-inspector-panel-open & {
			width: $unit + 2;
			height: $unit + 2;
			top: 0;
			right: $inspectorWidth;
		}

		.neos-edit-preview-panel-open & {
			top: -1px;
		}
	}

	> div {
		height: 100%;

		> div {
			height: 100%;
		}
	}
}

.neos-secondary-inspector-image-crop {
	overflow: auto;

	.neos-image-editor-crop-area {
		padding: 0 $defaultMargin;

		> img {
			max-width: none;
			visibility: hidden;
		}

		.jcrop-holder {
			margin: 0 auto;
		}
	}

	.neos-image-editor-crop-aspect-ratio {
		width: 600px;
		margin: 0 auto;
		padding: $unit $defaultMargin $defaultMargin;

		> span {
			line-height: $unit;
			margin-right: $relatedMargin;
			width: 92px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			i {
				vertical-align: baseline;
			}
		}

		> input {
			text-align: center;

			+ input {
				margin-left: $tightMargin;
			}
		}

		> span,
		> input,
		> button {
			float: left;
		}

		button {
			margin-left: $tightMargin;
			margin-right: $tightMargin;

			~ button {
				margin-left: $defaultMargin;
				margin-right: 0;
			}
		}

		.neos-select2-container {
			float: left;
			width: 270px;
			margin-right: $defaultMargin;
		}
	}

	 input[type="number"] {
		width: $unit * 2;
		height: $unit;
		border: 2px solid $grayMedium;
		background-color: $grayMedium;
		color: $textOnGray;
		font-size: 14px;
		padding: 0 ($defaultMargin - 2px);
		margin: 0;
		@include border-radius(0);
		@include box-sizing(border-box);
		@include box-shadow(none);
		@include transition(none);
		@include font;

		&:focus {
			background-color: #fff;
			border: 2px solid #fff;
			color: $textOnWhite;
			@include box-shadow(none);
		}
	}
}