/*
 * A mixin to add styles for the Markdown WYSIWYG extension's output.
 *
 * This is implemented as a mixin so that the caller can embed it in any
 * CSS class they like.

 * Note that there's similar styling code in
 * djblets/markdown/extensions/wysiwyg_email.py. If you make substantial
 * changes here, you may also want to make changes there.
 */
.markdown-wysiwyg() {
  .hide-br() {
    br {
      display: none;
    }
  }

  .show-br() {
    br {
      display: block;
    }
  }

  line-height: @textarea-line-height;
  .box-sizing(border-box);

  * {
    margin: 0;
    padding: 0;

    line-height: inherit;
    text-rendering: inherit;
    white-space: normal;

    .show-br();
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
  }

  p {
    white-space: inherit;

    /* Don't show both the <br> and the blank line. */
    .hide-br();
  }

  ul, ol {
    line-height: 0;
    margin: 0;
    padding: 0;

    p {
      /*
       * <p> tags in a list do not preserve whitespace, since there's
       * mandatory leading whitespace before the content.
       */
      .show-br();
    }

    ul, ol {
      margin-left: 2ch;
    }
  }

  ol {
    /*
     * We want to keep wrapped text within the confines of the list item. So:
     *
     * 1. This is long text that
     *    wraps like this.
     *
     * Instead of:
     *
     * 1. This is long text that
     * wraps like this.
     *
     * To do this, we need to use display: table and display: table-cell.
     * However, that loses item counter rendering, so we have to do counters
     * ourselves. In combination with StyledOListBlockProcessor in
     * reviewboard/reviews/markdown_extensions.py, this maintains compatibility
     * with the start= attribute.
     */
    counter-reset: li;
    display: table;
    list-style-position: inside;

    > li {
      counter-increment: li;
      display: table;

      &::before {
        content: counter(li) ". ";
        padding-right: 1ch;
        display: table-cell;
        text-align: right;
      }
    }
  }

  ul {
    list-style-position: outside;
    list-style: disc;
    margin-left: 2ch;
  }

  li {
    line-height: @textarea-line-height;

    ~ li:last-child {
      p:last-child {
        margin-bottom: 0;
      }
    }

    p {
      margin-bottom: @textarea-line-height;

      /*
       * If the list item ends up with a sole <p>, just remove the margins.
       * Depending on neighboring elements, Python Markdown will sometimes
       * create list items this way.
       */
      &:first-child:last-child {
        margin: 0;
      }
    }
  }

  table {
    th, td {
      border-bottom: 1px solid #bbb;
      padding: 0.2em 1em;
    }
  }

  code {
    color: #4444cc;
  }

  pre {
    .pre-wrap;
    font-size: inherit;
    margin-left: 2.5em;

    * {
      .pre-wrap;
    }
  }

  blockquote {
    border-left: 1px solid #bbb;
    padding-left: 1em;
    margin-left: 0.5em;
  }

  hr {
    border: 1px solid #ddd;
  }
}
