@import "blogelator/bourbon";
@import "blogelator/variables";

.blogelator-markdown-editor {
  bottom: -0.5em;
  left: 0.5em;
  margin-bottom: 1em;
  position: absolute;
  right: 0.5em;
  top: 3.5em;

  .CodeMirror {
    background-color: $base-body-color;
    border: 1px solid $base-border-color;
    color: $base-font-color;
    float: left;
    font-family: "Menlo", "Monaco", monospace;
    height: 100%;
    padding: 0.5em;
    position: relative;
    width: 49.8%;
    @include box-sizing(border-box);

    &:before {
      background-color: rgba($base-body-color, 0.92);
      content: "GitHub Flavored Markdown";
      color: #aaa;
      display: block;
      font-family: $base-font-family;
      left: 0;
      line-height: normal;
      padding: 10px;
      position: absolute;
      text-transform: uppercase;
      top: 0;
      width: 100%;
      z-index: 10;
      @include box-sizing(border-box);
    }

    .CodeMirror-lines {
      padding-top: 2em;
    }

    .CodeMirror-scroll {
      font-size: 14px;
      line-height: 1.5em;
    }
  }
  .html-preview {
    background-color: $base-body-color;
    border: 1px solid $base-border-color;
    float: right;
    height: 100%;
    margin-top: 0em;
    padding: 0.5em 0.5em 0 0.5em;
    position: relative;
    width: 49.8%;
    @include box-sizing(border-box);

    &:before {
      background-color: rgba($base-body-color, 0.92);
      content: "Preview";
      color: #aaa;
      display: block;
      font-family: $base-font-family;
      left: 0;
      line-height: normal;
      padding: 10px;
      position: absolute;
      text-transform: uppercase;
      top: 0;
      width: 100%;
      z-index: 10;
      @include box-sizing(border-box);
    }

    .post {
      height: 100%;
      overflow: auto;
      padding-top: 2em;
    }
  }

  // Markdown styles
  // ------------------------------------
  .cm-header-1,
  .cm-header-2,
  .cm-header-3,
  .cm-header-4,
  .cm-header-5,
  .cm-header-6 {
    color: #222;
    font-size: 1.1em;
    font-weight: bold;
  }
  .cm-em {
    font-style: italic;
  }
  .cm-strong {
    color: #222;
    font-weight: bold;
  }
  .cm-comment {
    color: #aaa;
  }

  .cm-link {
    color: $base-link-color;
    & + .cm-tag {
      color: $base-link-color;
    }
    & + .cm-string,
    & + .cm-tag + .cm-string {
      color: #aaa;
    }
  }

  // Code Styles
  // ------------------------------------
  .cm-atom,
  .cm-tag {
    color: #477dca;
  }
  .cm-keyword {
    color: #814ede;
  }
  .cm-number {
    color: #83c53d;
  }
  .cm-operator {
    color: #777;
  }
  .cm-string {
    color: #ca2969;
  }

}