// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.node-debugger {
  color: @text-color;
  height: 250px;
}

.node-debugger-editor {
  position: relative;
  overflow: auto;
}

.debugger-panel-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 33px;
  line-height: 33px;
  flex-basis: 33px;
  vertical-align: middle;
  background-color: @panel-heading-background-color;
  padding: 0 10px;
}

.list-item.heading {
  background-color: @panel-heading-background-color;
}

.debugger-vertical-pane {
}

.subtle-text {
  color: @text-color-subtle;
  font-size: @font-size * 0.8;
}

.watch-input-box {
  width: 96%;
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: @input-background-color;
  border: 0;
  height: 22px;
}

atom-text-editor.editor {
  .gutter .line-number {
      &.node-debugger-stop-line:before {
        content: ">";
        color: @text-color
      }

      &.node-debugger-attached-breakpoint {
        background-color: #F00;
      }

      &.node-debugger-detached-breakpoint {
        background-color: #FF850B;
      }
  }
}

/*
hack: force width to zero to be able to resize to atom-text-editor element
to solve resizing problem of console pane: https://github.com/kiddkai/atom-node-debugger/issues/109
*/
div.inset-panel atom-text-editor /deep/ .scroll-view div.lines {
    width:0px !important;
}