@import (reference) "djblets/css/mixins/markdown.less";

@import (reference) "rb/css/defs.less";


/****************************************************************************
 * Rich text
 ****************************************************************************/

:root,
.rich-text {
  --rb-u-code-block-border-radius: var(--ink-u-border-radius-s-inner);
  --rb-u-code-block-border-size: var(--ink-u-border-thin);
  --rb-g-code-block-border: var(--ink-g-border-input);
  --rb-u-inline-code-border-size: var(--ink-u-border-thin);
  --rb-u-inline-code-border-radius: var(--ink-u-border-radius-s-inner);
}

.rich-text {
  margin: 0;
  padding: 0;

  .markdown-wysiwyg();

  /*
   * NOTE: See .cm-rb-markdown-code in pages/reviews.less for details on
   *       how we're approaching displaying borders.
   *
   *       Much of this should eventually be moved back into Djblets.
   */
  .codehilite {
    background: var(--rb-theme-rich-text-code-bg);
    border: 0;
    border-radius: 0;
    color: var(--rb-theme-rich-text-code-fg);
    position: relative;
    margin: 0;
    padding: 0;

    &:before {
      content: "";
      position: absolute;
      background: inherit;
      border: var(--rb-g-code-block-border);
      border-radius: var(--rb-u-code-block-border-radius);
      top: calc(-1 * var(--rb-u-code-block-border-size));
      left: -@code-block-padding-horiz;
      right: -@code-block-padding-horiz;
      bottom: calc(-1 * var(--rb-u-code-block-border-size));
    }

    code {
      /* Undo the default `code` border rules below. */
      padding: 0;

      &:after,
      &:before {
        display: none;
      }
    }
  }

  code {
    white-space: pre-wrap;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding-left: 1ch;
    padding-right: 1ch;
    position: relative;

    &:after {
      content: "";
    }

    &:before {
      border: var(--rb-u-inline-code-border-size)
              var(--ink-p-code-literal-border-color)
              solid;
      border-radius: var(--rb-u-inline-code-border-radius);
      content: "";
      position: absolute;
      top: calc(-1 * var(--rb-u-inline-code-border-size));
      left: calc(-1 * var(--rb-u-inline-code-border-size));
      right: calc(-1 * var(--rb-u-inline-code-border-size));
      bottom: calc(-1 * var(--rb-u-inline-code-border-size));
      pointer-events: none;
      visibility: visible;
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .emoji {
    width: auto;
    height: 1rem;
    vertical-align: text-top;
  }
}
