#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;
  box-sizing: border-box;
  transition-property: left, margin-top;
  transition-duration: 0.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%;
    transition-property: height;
    transition-duration: 0.2s;
  }

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

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

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

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

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