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

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

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

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

	> .neos-contentelement-overlay {
		position: absolute;
		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-contentcollection {
	&.neos-contentelement-active {
		outline: 2px solid $blue !important;
		outline-offset: 6px;
	}
}

.neos-inline-editable {
	outline-offset: 6px;

	&: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;
		}
	}
}