// ---------------------------
// Z-Index
// ---------------------------
// [spec](https://trello.com/c/EDCiXGjq/732-z-indexing-part-2)
// - buttons => 70
// - entry box => 60
// - routing table => 55
// - dragging node => 50
// - selected node => 40
// - unselected node => 20
// - modal => 100
// - fluid-status => 10000

.modal-overlay {
  z-index: 100 !important;
}

#buttons {
  z-index: 70;
}

.error-panel {
  z-index: 260;
}

.message-panel {
  z-index: 57;
}

#sidebar-left {
  z-index: 55;
}

#canvas.page-handler,
#canvas.page-function {
  left: 320px;
}

.entry {
  form {
    #search-container {
      #entry-box {
        min-width: 1px;
        z-index: 60;
      }
    }
  }
}

.omnibox .entry {
  #search-container,
  #autocomplete-holder {
    /* XXX(JULIAN): because the context of the z-index is local, this will not place the omnibox over
       non-siblings. e.g. .node .hovering below is in a different stacking context. See
       https://developer.mozilla.org/en-US/docs/Web/CSS/z-index */
    z-index: 100;
  }
}

.string-entry {
  #entry-box {
    z-index: 60;
  }
}

.overlay {
  z-index: 30;
}

.toast {
  z-index: 500;
}

.node {
  z-index: 20;

  &.dragging {
    z-index: 50;
  }

  &.selected,
  &.hovering {
    z-index: 40;
  }
}

.tlref {
  z-index: 40;
}

.back-to-canvas {
  z-index: 200;
}

.error-indicator {
  &:hover:after {
    z-index: 40;
  }
}

#debug {
  min-height: 20px;
  z-index: 100;
  position: absolute;
  bottom: 0;
  right: 0;
  max-height: 500px;
  max-width: 500px;
  overflow: scroll;

  nav {
    max-width: 50%;

    .history {
      span {
        &.details {
          width: 25px;
        }

        &.message {
          width: calc(#{"100% - 75px"});
        }

        &.index {
          width: 30px;
          clear: both;
        }
      }
    }
  }
}
