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

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

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

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

#neos-navigate-panel {
	background-color: $grayDark;
	width: $navigatePanelWidth + 1;
	margin: 0;
	padding: 0;
	position: fixed;
	overflow: hidden;
	left: -($navigatePanelWidth + 1);
	top: $unit;
	bottom: 0;
	z-index: 10020;
	padding-top: $unit * 2 + 2;
	padding-bottom: $unit * 1 + 1;
	border-top: 1px solid $grayLight;
	border-right: 1px solid $grayLight;
	@include box-sizing(border-box);
	@include transition-property(left, margin-top);
	@include transition-duration(.2s);
	@include font;

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

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

	@import "NodeTree";
	@import "ContextStructureTree";

	#neos-node-tree {
		height: 50%;
		@include transition-property(height);
		@include transition-duration(.2s);
	}

	#neos-context-structure {
		height: 50%;
	}

	&.neos-navigate-panel-context-structure-open {
		#neos-node-tree {
			height: 100%;
			@include box-sizing(border-box);
		}

		#neos-context-structure {
			height: $unit + 1;

			#neos-context-structure-toolbar {
				border-bottom: none;
			}

			#neos-context-structure-tree-container {
				display: none;
			}
		}
	}
}