.neos-contentelement {
	&.neos-contentelement-hidden > * {
		@include opacity(0.2);
	}

	&.neos-contentelement-removed {
		display: none;
	}

	&.neos-contentelement-hover {
		outline: 2px solid rgba(0, 0, 0, .2);
		outline-offset: 6px;

		// Mark content elements which are inline-editable
		.neos-inline-editable:hover {
			outline: 2px dashed rgba(0, 0, 0, .2) !important;
		}
		> .neos-inline-editable:hover {
			outline: none !important;
		}

		// Content elements which "shine through" from other content dimensions should appear with orange outline
		&.neos-contentelement-shine-through {
			outline: 2px solid $orange;
		}
	}

	&.neos-contentelement-active {
		outline: 2px solid $blue !important;
		outline-offset: 6px;

		// Mark content elements which are inline-editable
		.neos-inline-editable:hover {
			outline: 2px dashed $blue !important;
		}
	}

	&.neos-contentelement-hover > .neos-contentelement-overlay,
	&.neos-contentelement-active > .neos-contentelement-overlay {
		display: block;
	}

	&.neos-not-inline-editable {
		position: relative;

		> .neos-contentelement-overlay {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10000;
			@include background-image(linear-gradient(top, rgba(50,50,50,0.1), rgba(50,50,50,0.2), rgba(50,50,50,0.1)));
		}
	}

	.neos-inline-editable,
	.aloha-editable-active,
	.aloha-editable-active[contenteditable=true]:focus {
		outline: none !important;
	}

	/* Workaround for empty divs collapsing in Firefox / IE needed for Aloha placeholders */
	.neos-inline-editable:empty::after {
		content: '.';
		color: transparent;
	}
}

.neos-contentcollection {
	&.neos-contentelement-active {
		outline: 2px solid $blue !important;
		outline-offset: 6px;
	}
}

.neos-inline-editable {
	outline-offset: 6px;
	min-height: 1.2em;

	&:hover {
		outline: 2px solid rgba(0, 0, 0, .2);
	}

	&.aloha-editable-active {
		outline: 2px solid $blue !important;
	}
}

button.neos-create-new-content {
	position: relative;
	z-index: 100;
}

// Hide content element status indicators by default
.neos-status-indicator {
	display: none;
}

/**
 * if content elements cannot be rendered
 * the exception is displayed instead of the actual element
 *
 * its format is defined here
 */
.neos-rendering-exception {
	background-color: $grayLighter;
	padding-top: $defaultMargin / 2;
	padding-left: $defaultMargin;
	padding-right: $defaultMargin;
	padding-bottom: $defaultMargin / 2;
	margin-top: $defaultMargin;
	margin-bottom: $defaultMargin;

	.neos-rendering-exception-title,
	.neos-exception-message {
		color: $warning;
		font-weight: bold;
	}

	.neos-typoscript-path {
		color: #000;

		.neos-typoscript-subpath {
			padding-left: 2em;
		}
	}
}

.aloha-placeholder {
	@include opacity(.75);
}