/* pen plugin
 */

.jotted-plugin-pen {
  display: flex;
  flex-flow: row wrap;
  user-select: none;
}

.jotted-plugin-pen .jotted-pane-result {
  flex: 1 100%;
}

.jotted-plugin-pen .jotted-editor .CodeMirror {
  height: calc(100% - 39px);
}

.jotted-plugin-pen .jotted-nav {
  display: none;
}

.jotted-plugin-pen .jotted-pane {
  padding-top: 0;
  height: 50%;
}

.jotted-plugin-pen .jotted-pane-title {
  display: block;
  background: rgba(51,51,51,0.08);
  border-bottom: 1px solid rgba(51,51,51,0.2);
  padding: 0 0.8em;
  line-height: 2.4em;

  font-family: sans-serif;
}

.jotted-plugin-pen .jotted-pane-title-result {
  display: none;
}

.jotted-plugin-pen .jotted-pane-result,
.jotted-plugin-pen.jotted-has-html .jotted-pane-html,
.jotted-plugin-pen.jotted-has-css .jotted-pane-css,
.jotted-plugin-pen.jotted-has-js .jotted-pane-js,
.jotted-plugin-pen.jotted-plugin-console .jotted-pane-console {
  position: relative;
  visibility: visible;
}

/* widths
 */
.jotted-plugin-pen.jotted-has-html .jotted-pane,
.jotted-plugin-pen.jotted-has-css .jotted-pane,
.jotted-plugin-pen.jotted-has-js .jotted-pane {
  max-width: 100%;
  width: 100%;
}

.jotted-plugin-pen.jotted-has-html.jotted-has-css .jotted-pane-html,
.jotted-plugin-pen.jotted-has-html.jotted-has-css .jotted-pane-css,
.jotted-plugin-pen.jotted-has-html.jotted-has-js .jotted-pane-html,
.jotted-plugin-pen.jotted-has-html.jotted-has-js .jotted-pane-js,
.jotted-plugin-pen.jotted-has-css.jotted-has-js .jotted-pane-css,
.jotted-plugin-pen.jotted-has-css.jotted-has-js .jotted-pane-js {
  max-width: 50%;
  width: 50%;
}

.jotted-plugin-pen.jotted-has-html.jotted-has-css.jotted-has-js .jotted-pane-html,
.jotted-plugin-pen.jotted-has-html.jotted-has-css.jotted-has-js .jotted-pane-js,
.jotted-plugin-pen.jotted-has-html.jotted-has-css.jotted-has-js .jotted-pane-css {
  max-width: 33.3333%;
  width: 33.3333%;
}

/* console plugin tweaks
 */
.jotted-plugin-pen.jotted-plugin-console .jotted-console-clear {
  top: 4.3em;
}

.jotted-plugin-console.jotted-plugin-pen.jotted-has-html .jotted-pane,
.jotted-plugin-console.jotted-plugin-pen.jotted-has-css .jotted-pane,
.jotted-plugin-console.jotted-plugin-pen.jotted-has-js .jotted-pane {
  width: 50%;
}

.jotted-plugin-console.jotted-plugin-pen.jotted-has-html.jotted-has-css .jotted-pane,
.jotted-plugin-console.jotted-plugin-pen.jotted-has-html.jotted-has-js .jotted-pane,
.jotted-plugin-console.jotted-plugin-pen.jotted-has-css.jotted-has-js .jotted-pane {
  width: 33.33%;
}

.jotted-plugin-console.jotted-plugin-pen.jotted-has-html.jotted-has-css.jotted-has-js .jotted-pane {
  width: 25%;
}

/* expand handle
 */
.jotted-plugin-pen-expander {
  position: absolute;
  height: 100%;
  width: 3px;
  z-index: 5;
  cursor: col-resize;
  border-left: 1px solid #ddd;
}
