#neos-edit-preview-button {
	position: relative;
	background-color: $grayDark;
	border-right: 1px solid $grayLight;

	&:hover,
	&.neos-pressed {
		color: $blue;
	}

	.neos-active {
		font-weight: bold;
	}

	.neos-navigate-panel-open &,
	.neos-menu-panel-open:not(.neos-menu-panel-sticky) & {
		&.neos-pressed:after {
			display: none;
		}
	}

	&.neos-pressed {
		background-color: $grayDarker;

		&:after {
			display: block;
			content: "";
			width: 100%;
			height: 1px;
			left: 0;
			bottom: -1px;
			position: absolute;
			background-color: $grayDarker;
		}
	}
}

#neos-edit-preview-panel {
	position: fixed;
	top: -($editPreviewPanelHeight - $unit);
	left: 0;
	right: -1px;
	height: $editPreviewPanelHeight;
	background-color: $grayDarker;
	z-index: 10013;
	border-bottom: 1px solid $grayLight;

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

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

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

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

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

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

	.neos-edit,
	.neos-preview {
		position: relative;
		width: 50%;
		height: $editPreviewPanelHeight;
		float: left;
		@include box-sizing(border-box);

		.neos-edit-preview-panel-title {
			padding: 0 $unit;
			padding-top: $unit / 2;
			@include font();
		}

		.neos-scroll-container {
			overflow: hidden;
			height: $unit + $unit / 2;
			padding: 0 $unit;
			padding-top: $unit / 4;
			padding-bottom: $unit / 4;
			@include box-sizing(border-box);
			position: relative;

			.neos-frame {
				height: 100%;
			}
		}

		ul.neos-edit-preview-modes {
			padding: 0px;
			overflow: hidden;
			min-width: 100%;
			@include box-sizing(border-box);
			height: 100%;

			li {
				float: left;
				padding-right: 8px;
			}
		}

		.neos-scroll-previous,
		.neos-scroll-next {
			width: $unit * 2 - $unit / 4;
			height: $unit + $unit / 4;
			background: transparent;
			display: block;
			position: absolute;
			top: ($unit / 4) - 5px;
			cursor: pointer;

			&::after {
				position: absolute;
				top: 8px;
				@include font;
				font-size: 26px;
				line-height: 26px;
				font-weight: normal;
				color: $grayLight;
			}

			&::before {
				content: "";
				height: 100%;
				width: 1px;
				@include background-image(linear-gradient(rgba($grayLight, 0) 0%, rgba($grayLight, 0.7) 16px, rgba($grayLight, 0.7) 37px, rgba($grayLight, 0) 100%));
				position: absolute;
				top: 0px;
			}

			&.neos-disabled {
				display: none;
			}
		}

		.neos-scroll-previous {
			left: 0px;
			@include background-image(linear-gradient(right, rgba($black, 0) 0%, rgba($grayDarker, 0.4) 13px, $grayDarker 27px));

			&::after {
				content: "‹";
				left: 15px;
			}

			&::before {
				left: $unit;
			}
		}

		.neos-scroll-next {
			right: 0px;
			@include background-image(linear-gradient(left, rgba($black, 0) 0%, rgba($grayDarker, 0.4) 13px, $grayDarker 27px));

			&::after {
				content: "›";
				right: 15px;
			}

			&::before {
				right: $unit;
			}
		}
	}
}