#neos-inspector-button {
	position: fixed;
	z-index: 10015;
	top: $unit;
	right: 0;
	width: $unit + 1;
	height: $unit + 2;
	border: 1px solid $grayLight;
	background-color: $grayDarker;
	background-image: none;
	@include text-shadow(none);
	@include box-shadow(none);

	@include transition-property(top);
	@include transition-duration(0.2s);

	&:before {
		position: relative;
		top: 1px;
		@include font;
		font-size: 26px;
		line-height: 26px;
		font-weight: normal;
		content: "‹";
	}

	&:hover,
	&.neos-is-active {
		background-color: $blue;
	}

	&.neos-pressed:before {
		content: "›";
	}
}

#neos-inspector {
	position: fixed;
	top: $unit;
	bottom: 0;
	right: -($inspectorWidth + 1px);
	width: $inspectorWidth;
	background-color: $grayDark;
	z-index: 10014;
	border-top: 1px solid $grayLight;
	border-left: 1px solid $grayLight;
	padding-top: $unit;
	padding-bottom: $unit + 1px;
	@include transition-property(right);
	@include transition-duration(.2s);
	@include font;

	&.neos-node-is-read-only * {
		display: none;
	}

	.neos-inspector-panel-open & {
		right: 0;
	}

	@import "Editors/AssetEditor";
	@import "Editors/DateTimePicker";
	@import "Editors/ImageEditor";
	@import "Editors/LinkEditor";
	@import "Editors/SelectBoxEditor";

	.neos-toolbar {
		position: absolute;
		top: 0;
		width: 100%;
		height: $unit + 1px;
		@include box-sizing(border-box);
		border-bottom: 1px solid $grayLight;
		background: $grayDarker;
		line-height: $unit;
		z-index: 10015;
	}

	.neos-inspector-tabs {
		clear: both;

		> button {
			position: relative;
			display: inline-block;
			float: left;
			background: none;
			border-right: 1px solid $grayLight;
			color: $textSubtleLight;
			cursor: pointer;

			i {
				font-size: 16px;
				line-height: 16px;
			}

			&:hover {
				color: $blue;
			}

			&:focus {
				outline: none;
			}

			&.is-active {
				background-color: $grayDark;
				color: $blue;

				&:after {
					display: block;
					position: absolute;
					top: $unit;
					left: 0;
					width: 100%;
					border-bottom: 1px solid $blue;
					content: '';
				}
			}

			// Hide tabs from 7 onwards
			&:nth-of-type(n+7) {
				display: none;
			}
		}
	}

	.neos-inspector-tab-content {
		display: none;

		&.is-visible {
			display: block;
		}
	}

	.neos-inspector-form {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		padding-top: 11px;
		@include box-sizing(border-box);

		#neos-content-breadcrumb {
			max-width: $inspectorWidth - $defaultMargin * 2;
			margin-right: -$relatedMargin;
			@include user-select(none);
			position: relative;

			&.neos-open {
				ul {
					display: block;
				}
			}

			i {
				margin-right: 5px;
			}

			div {
				position: relative;
				background-color: $grayMedium;
				height: $unit;

				span {
					display: block;
					margin-right: $unit;
					line-height: $unit;
					height: $unit;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding: 0 $defaultMargin;
				}
			}

			&.neos-breadcrumb-multiple {
				cursor: pointer;

				div {
					span {
						margin-right: $unit;
					}

					&:before {
						display: block;
						content: '';
						position: absolute;
						width: 1px;
						height: $relatedMargin * 3;
						top: $relatedMargin;
						right: $unit + 1;
						background-color: #fff;
						opacity: .15;
					}

					&:after {
						@extend .fas;
						content: fa-content($fa-var-caret-down);
						display: block;
						position: absolute;
						width: $unit;
						text-align: center;
						line-height: $unit;
						top: 0;
						right: 0;
					}
				}
			}

			ul {
				display: none;
				position: absolute;
				margin: 0;
				width: 100%;
				z-index: 10015;
				@include box-shadow(1px 2px 5px $grayDark);

				li {
					position: relative;
					min-height: $unit;
					background-color: $grayMedium;
					border-top: 1px solid $grayDark;

					&:first-child {
						background-color: $blue;
					}

					&:hover {
						background-color: $blue;
					}

					i {
						display: inline-block;
					}

					a {
						display: block;
						height: 100%;
						line-height: $unit;
						color: #fff;
						padding: 0 $defaultMargin;
						@include box-sizing(border-box);

						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}

		.neos-inspector-list-stacked {
			li {
				font-size: 12px;
				line-height: 16px;
				margin-bottom: $relatedMargin;
				background-color: #323232;
				padding: $defaultMargin;
			}
		}

		.neos-inspector-section {
			position: relative;
		}

		.neos-inspector-collapse {
			float: right;
			width: $unit;
			height: $unit;
			cursor: pointer;

			&:hover {
				background-color: $blue;
				color: #fff;
			}

			&::before {
				content: "›";
				font-size: 26px;
				font-weight: normal;
				display: inline-block;
				margin-right: 18px;
				position: relative;
				left: 3px;
				width: $unit;
				text-align: center;
				@include rotate(90deg);
			}

			&.neos-open::before {
				@include rotate(-90deg);
				left: -3px;
			}
		}

		.neos-inspector-headline {
			width: 100%;
			height: $unit;
			line-height: $unit;
			border-top: 1px solid $grayLight;
			font-weight: bold;
			@include user-select(none);

			&.neos-validation-error {
				span {
					padding-right: $relatedMargin;
					max-width: $inspectorWidth - $unit - $relatedMargin - $defaultMargin;
				}

				i {
					float: left;
					color: $warning;
					line-height: $unit;
				}
			}

			span {
				display: block;
				float: left;
				padding-left: $defaultMargin;
				padding-right: $defaultMargin;
				max-width: $inspectorWidth - $unit - $relatedMargin;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				@include box-sizing(border-box);
			}
		}

		.neos-inspector-field {
			padding: 0 $defaultMargin;

			label {
				cursor: default;
			}

			& > div {
				padding-bottom: $defaultMargin;
			}
		}

		label {
			@include font;
			font-size: 14px;
			cursor: pointer;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: $inspectorWidth - $defaultMargin * 2;
			padding: 0;
			margin-bottom: $tightMargin;
			@include user-select(none);

			&.neos-checkbox {
				margin-top: $relatedMargin;
			}
		}

		input[type="text"],
		input[type="password"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="date"],
		input[type="month"],
		input[type="time"],
		input[type="week"],
		input[type="number"],
		input[type="range"],
		input[type="date"],
		input[type="email"],
		input[type="url"],
		input[type="search"],
		input[type="tel"],
		input[type="color"],
		input[type="number"],
		textarea,
		.neos-uneditable-input {
			width: 100%;
			min-width: $inspectorWidth - $defaultMargin * 2;
			height: $unit;
			border: 2px solid $grayMedium;
			background-color: $grayMedium;
			color: $textOnGray;
			@include font;
			font-size: 14px;
			padding: 0 ($defaultMargin - 2px);
			margin: 0;
			@include box-sizing(border-box);
			@include box-shadow(none);
			@include transition(none);

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

			// Highlight changed elements in the Property Panel
			&.neos-modified {
				border: 2px solid $green;
			}
		}

		.neos-modified {
			& > input[type="text"],
			& > input[type="password"],
			& > input[type="datetime"],
			& > input[type="datetime-local"],
			& > input[type="date"],
			& > input[type="month"],
			& > input[type="time"],
			& > input[type="week"],
			& > input[type="number"],
			& > input[type="range"],
			& > input[type="date"],
			& > input[type="email"],
			& > input[type="url"],
			& > input[type="search"],
			& > input[type="tel"],
			& > input[type="color"],
			& > input[type="number"],
			& > textarea,
			& > .neos-uneditable-input {
				border: 2px solid $green;
			}

			input[type=checkbox] {
				& + span:before {
					border: 1px solid $green;
				}

				&:checked + span:before {
					background-color: $green;
					border: 1px solid $green;
				}

				&:checked:hover + span:before {
					border: 1px solid $blue;
				}
			}

			.neos-select2-container {
				.neos-select2-choice {
					border: 2px solid $green;
					padding: ($relatedMargin - 3px) ($defaultMargin - 2px);

					.neos-select2-arrow {
						width: $unit - 2px;

						&:before {
							top: $relatedMargin - 2;
							right: $unit - 2;
						}

						&:after {
							width: $unit - 2;
							height: $unit - 4;
							line-height: $unit - 4;
						}
					}

					.neos-select2-search-choice-close {
						right: $unit - 1;

						i {
							line-height: $unit - 4;
						}

						&:before {
							top: $relatedMargin - 2;
							right: $unit - 2;
						}

						&:after {
							width: $unit - 2;
							height: $unit - 4;
							line-height: $unit - 4;
						}
					}
				}

				.neos-select2-choices {
					border: 2px solid $green;

					.neos-select2-search-choice {
						&:first-child {
							div {
								padding: ($relatedMargin - 2px) ($defaultMargin - 2px) $relatedMargin;
							}

							.neos-select2-search-choice-close {
								height: $unit - 2px;

								i {
									top: 10px;
								}
							}
						}

						div {
							padding: $relatedMargin ($defaultMargin - 2px);
							margin-right: $unit + 2px;
						}

						.neos-select2-search-choice-close {
							width: $unit + 2px;
						}
					}

					.neos-select2-search-field {
						input {
							height: $unit - 2px;
							padding-left: $defaultMargin - 4px;
							padding-top: 2px;
						}

						&:after {
							bottom: 9px;
							right: 8px;
						}
					}
				}
			}
		}

		.neos-error {
			& > input[type="text"],
			& > input[type="password"],
			& > input[type="datetime"],
			& > input[type="datetime-local"],
			& > input[type="date"],
			& > input[type="month"],
			& > input[type="time"],
			& > input[type="week"],
			& > input[type="number"],
			& > input[type="range"],
			& > input[type="date"],
			& > input[type="email"],
			& > input[type="url"],
			& > input[type="search"],
			& > input[type="tel"],
			& > input[type="color"],
			& > input[type="number"],
			& > textarea,
			& > .neos-uneditable-input {
				color: $warning;
				border: 2px solid $warning;
				@include box-shadow(none);
			}
		}

		input[placeholder],
		input::-webkit-input-placeholder,
		input:-moz-placeholder {
			color: $textSubtle;
		}

		textarea {
			max-height: $unit;
			line-height: $unit - 2px;
			overflow: hidden;
			resize: none;
			height: auto;
			@include box-sizing(border-box);

			&:focus {
				max-height: none;
				line-height: $generalFontSize * 1.5;
				padding-top: $relatedMargin;
				padding-bottom: $relatedMargin;
				overflow: auto;
				resize: vertical;
			}
		}

		.text-area-editor {
			@include scroll-bar-light;
		}

		select {
			width: 100%;
			min-width: $inspectorWidth - $defaultMargin * 2;
		}

		@import "../Shared/Checkboxes";
		@import "../Shared/Sortable";

		.neos-input-prepend,
		.neos-input-append {
			display: table;
			width: 100%;
			white-space: normal;
			margin: 0;
		}

		.neos-add-on {
			display: table-cell;
			background-color: $grayMedium;
			color: #fff;
			@include text-shadow(none);
			border: none;
			border-right: 1px solid $grayDark;
			padding: 9px;
			min-width: $unit + 1px;
			text-align: center;
			position: relative;
			@include border-radius(0);
			@include box-sizing(border-box);
			font-size: 14px;

			[class^="fa-"],
			[class*=" fa-"] {
				vertical-align: top;
			}

			input {
				margin: 0;
			}

			label {
				width: auto;
				margin: 0;

				span {
					margin-right: 0;
				}
			}
		}

		.neos-add-on + span {
			display: table-cell;
			padding-bottom: 0;

			input {
				min-width: 0;
			}
		}

		span + .neos-add-on {
			border-left: 1px solid $grayDark;
			border-right: none;
		}

		.neos-tooltip {
			&.neos-bottom {
				padding: $relatedMargin 0 0 0;
				margin-left: $tightMargin;
				margin-top: -1px;
			}

			&.neos-in {
				@include opacity(1);
			}

			.neos-tooltip-arrow {
				margin-left: -$relatedMargin;
				border-width: 0 $relatedMargin $relatedMargin $relatedMargin;
				border-bottom-color: $warning;
			}

			.neos-tooltip-inner {
				max-width: $inspectorWidth - $defaultMargin * 2;
				background-color: $warning;
				font-size: 13px;
				color: #fff;
				@include border-radius(0);
				@include box-sizing(border-box);
			}
		}
	}

	.neos-actions {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: $unit;
		border-top: 1px solid $grayDark;
		background-color: $grayDark;

		button {
			&.neos-inspector-cancel {
				float: left;
				background-color: $grayLight;
				width: 144px;
			}

			&.neos-inspector-apply {
				float: right;
				background-color: $green;
				width: 172px;
			}
		}
	}

	.widget {
		margin: 0 $defaultMargin 20px $defaultMargin;
		height: auto;

		.neos-widget-subtitle {
			color: $textSubtleLight;
			float: right;
		}

		.neos-widget-loading {
			color: $textSubtleLight;
		}

		.neos-widget-error i {
			color: $warning;
		}
	}

	.neos-help-message-button {
		// Popover positions itself automatically and it's relative to this element.
		// We need to add some offset to make space for Popover arrow
		// and then de-offset it so it's not too far away from the label text.
		margin-left: -10px;

		.neos-help-message-icon {
			margin-left: 12px;
		}
	}

	.neos-popover {
		width: $popoverSizeForHelpMessages;
	}

	@import "Views/ColumnView";
	@import "Views/TableView";
	@import "Views/TimeSeriesView";
	@import "Views/NodeInfoView";
}

#neos-inspector-clickprotection {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.inspector-dialog {
	position: fixed;
	z-index: 11000;
}