/**
 * Import Compass and Theme Variables
 */

@import "_variables";


/* ==========================================================================
   Markdown Editor
   ========================================================================== */

.a-MDEditor {}

.a-MDEditor .a-Toolbar {
  border-color: rgba(0, 0, 0, 0.075);
  background-color: rgba(0, 0, 0, 0.025);
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;

  .a-Button {
    &:not(:hover):not(:active):not(:focus) {
      background-color: transparent;
      box-shadow: none;
    }

    // &:not(:only-of-type) {
    //   border-radius: 0;
    // }

    // &:first-child {
    //   border-top-left-radius: @g_Button-BorderRadius;
    //   border-bottom-left-radius: @g_Button-BorderRadius;
    // }

    // &:last-child {
    //   border-top-right-radius: @g_Button-BorderRadius;
    //   border-bottom-right-radius: @g_Button-BorderRadius;
    // }
  }
}

.a-MDEditor-previewPanel,
.a-MDEditor textarea.apex-item-textarea,
.a-MDEditor .CodeMirror {
  border-color: rgba(0, 0, 0, 0.075);
  background-color: #fff;
  color: @g_Form-Item-FG;
  border-bottom-left-radius: .2rem;
  border-bottom-right-radius: .2rem;

  &:focus,
  &.CodeMirror-focused {
    border-color: @g_Accent-BG;
  }
}



/* ==========================================================================
   Markdownified
   ========================================================================== */

.is-markdownified {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: inherit;
  }

  hr {
    background: none;
    border-top-color: rgba(0, 0, 0, 0.2);
  }

  blockquote {
    border-left-color: rgba(0, 0, 0, 0.1);
  }

  code {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset rgba(0, 0, 0, 0.05) 0 0 0 1px;
  }

  pre {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset rgba(0, 0, 0, 0.05) 0 0 0 1px;

    code {
      background-color: transparent;
      box-shadow: none;
    }
  }

  table {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.075);

    th {
      background-color: rgba(0, 0, 0, 0.015);
    }

    th,
    td {
      border-bottom-color: rgba(0, 0, 0, 0.05);
    }

    tr:hover {
      td {
        background-color: rgba(0, 0, 0, 0.0125);
      }

      th {
        background-color: rgba(0, 0, 0, 0.25);
      }
    }
  }
}