/* EDITOR GENERAL STYLES */
.editor .sidebar {
  overflow-y      : auto;
  overflow-x      : hidden;
  color           : #37474f;
  box-sizing      : border-box;
  background-color: #ddd;
}

.editor .container {
  overflow  : hidden;
  width     : 100%;
  box-sizing: border-box;
}

.editor.full .container {
  position: fixed;
  top     : 3em;
  right   : 0;
  width   : 75%;
  height  : calc(100% - 6em);
}

.editor .sidebar h2 {
  margin-top: 0;
}

.editor #preview-area,
.editor textarea {
  position  : relative;
  box-sizing: border-box;
  height    : 100%;
  width     : 100%;
  border    : 0;
  padding   : 1.5em 10%;
  font-size : 1.05em;
}

.editor #preview-area *:first-child {
  margin-top: 0;
}

.editor textarea {
  resize     : none;
  font-family: monospace;
}

.editor textarea:focus {
  outline: 0;
}

.editor input {
  width           : 100%;
  background-color: rgba(0, 0, 0, 0.25);
  color           : rgba(255, 255, 255, 0.3);
  border          : 0;
  border-radius   : 5px;
  padding         : .5em 1em;
  box-sizing      : border-box;
}

.editor input:focus {
  color : rgba(255, 255, 255, 0.7);
  border: 0;
}

.editor h3 {
  font-size  : 1em;
  margin     : 0 0 .25em;
  font-weight: bold;
}

.action-bar {
  position        : fixed;
  bottom          : 0;
  right           : 0;
  width           : 100%;
  background-color: #455a64;
  height          : 3em;
  display         : flex;
  padding         : .5em 1em;
  box-sizing      : border-box;
  z-index         : 999;
}

.action-bar .left {
  margin-right: auto;
}

.action-bar *:last-child {
  margin-left: 1em;
}

/* EDITOR FRONTMATTER ONLY STYLES */
.frontmatter-only .box,
.content-only .box {
  height: calc(100% - 6em);
}

.frontmatter-only .sidebar {
  width: 100%;
}

.frontmatter-only input {
  color: rgba(255,255,255,.4);
}

.frontmatter-only input:focus {
  color: rgba(255,255,255,.85);
}

.frontmatter-only .action-bar input,
.frontmatter-only .action-bar input:focus {
  color: #fff;
}

.frontmatter-only fieldset {
  border-top: 1px solid rgba(0,0,0,.1);
}

.frontmatter-only h3 {
  font-size: 1.5em;
}

/* EDITOR CONTENT ONLY STYLES */
.content-only #content-area,
.content-only #preview-area {
  padding: 0;
}

/* EDITOR FULL STYLES */
.full .sidebar {
  position        : fixed;
  left            : 0;
  top             : 3em;
  width           : 25%;
  padding         : 1.5em 1em;
  background-color: #37474f;
  color           : #ddd;
  height          : calc(100% - 3em);
}

.full .action-bar {
  width: 75%;
}