/* console plugin
 */

.jotted-nav-item-console {
  display: block;
}

.jotted-pane-console {
  background: #fff;
}

.jotted-pane-active-console .jotted-pane-console {
  position: relative;
  visibility: visible;
}

.jotted-pane-active-console .jotted-nav-item-console {
  background: #fff;
  border-color: rgba(#333, .3);

  color: #222;
}

/* scroll container
 */
.jotted-console-container {
  height: 100%;
  overflow: auto;

  font-family: monospace;
}

/* output
 */
.jotted-console-output {
  margin: 0;
  padding: 0;
  list-style-type: none;

  line-height: 2.8em;
}

.jotted-console-log {
  padding: 0 1em;
}

.jotted-console-log-history {
  border-width: 1px 0;
  border-style: solid;
  border-color: rgba(#333, .08);
  background: rgba(#333, .04);
}

.jotted-console-log-error {
  background: #FFCCBC;

  color: #550000;
}

/* input form
 */
.jotted-console-input {
  position: relative;
  background: rgba(#333, .12);
}

.jotted-console-input:before {
  content: '>';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 0 1em;
  pointer-events: none;

  font-family: inherit;
  font-weight: bold;
  line-height: 2.4em;
}

.jotted-console-input input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 2.4em;
  border: 0;
  padding: 0 1em 0 2.4em;
  background: transparent;

  line-height: 2.4em;
  font-family: inherit;
}

/* clear button
 */

.jotted-console-clear {
  position: absolute;
  top: 3.3em;
  right: 1.4em;
}
