/* Render View pane (see RenderView). Starts as a copy of the editor pane in text.css. */

div.text-render-pane {
    background-color: ghostwhite;
    border: 2px solid #111111;
    border-radius: 4px;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
}

div.text-render-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 2px solid navy;
}

/* The document title, with its rename button just after it */
span.text-render-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

span.text-render-title button {
    flex: 0 0 auto;
}

span.text-render-path {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-weight: bold;
    color: navy;
    font-size: 1.35em;
    padding-left: 8px;
}

/* Takes the title's place in the Preview layout. Holds the render style selector (phase D). */
span.text-render-style {
    flex: 1;
    min-width: 0;
}

span.text-render-header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Marks the button of the mode currently showing: Display, or Preview in the Preview layout */
button.text-render-mode-current {
    border-color: navy;
    border-radius: 4px;
}

div.text-render-body {
    flex: 1;
    overflow-y: auto;
}

/* The rendered document (see RenderHtml). Everything is set through the variables below, so a
   rendering style only needs to redefine them. Sizes are in em, so --qt-base-size scales the
   whole document. Colours are the same in light and dark mode, like a printed page. */

div.qt-render {
    --qt-base-size: 16px;
    --qt-font: "Open Sans", "IBM Plex Sans", sans-serif;
    --qt-heading-font: var(--qt-font);
    --qt-text-color: black;
    --qt-background-color: white;
    --qt-heading-color: navy;
    --qt-bullet-color: navy;
    --qt-line-height: 1.5;
    --qt-padding: 1em 1.5em;
    --qt-paragraph-gap: 0.75em;

    --qt-h1-size: 2em;
    --qt-h1-weight: bold;
    --qt-h1-margin: 0.75em 0 0.4em 0;
    --qt-h2-size: 1.5em;
    --qt-h2-weight: bold;
    --qt-h2-margin: 0.75em 0 0.4em 0;

    --qt-list-indent-1: 1.5em;
    --qt-list-indent-2: 3em;
    --qt-bullet-1: "\2022";
    --qt-bullet-2: "\25E6";
    --qt-bullet-scale: 2;
    --qt-bullet-gap: 0.7em;
    --qt-list-item-gap: 0.2em;

    --qt-bold-weight: bold;
    --qt-code-font: "DejaVu Sans Mono", Menlo, Consolas, monospace;
    --qt-code-size: 0.9em;
    --qt-code-color: #333333;
    --qt-code-background: #EEEEEE;
    --qt-code-padding: 0.1em 0.3em;
    --qt-code-radius: 3px;
    --qt-code-block-padding: 0.6em 0.9em;
    --qt-code-block-line-height: 1.4;
    --qt-tab-size: 4;

    --qt-rule-color: #999999;
    --qt-rule-thickness: 1px;
    --qt-rule-margin: 1em 0;

    --qt-indent-1: 2em;
    --qt-indent-2: 4em;

    font-size: var(--qt-base-size);
    font-family: var(--qt-font);
    color: var(--qt-text-color);
    background-color: var(--qt-background-color);
    line-height: var(--qt-line-height);
    padding: var(--qt-padding);
    overflow-wrap: anywhere;
    min-height: 100%;
    box-sizing: border-box;
}

/* Heading margins are in the heading's own em, so they scale with its font size */
div.qt-render h1.qt-h1 {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-h1-size);
    font-weight: var(--qt-h1-weight);
    color: var(--qt-heading-color);
    margin: var(--qt-h1-margin);
    line-height: 1.2;
}

div.qt-render h2.qt-h2 {
    font-family: var(--qt-heading-font);
    font-size: var(--qt-h2-size);
    font-weight: var(--qt-h2-weight);
    color: var(--qt-heading-color);
    margin: var(--qt-h2-margin);
    line-height: 1.2;
}

div.qt-render p.qt-p,
div.qt-render div.qt-list {
    margin: 0 0 var(--qt-paragraph-gap) 0;
}

/* A heading at the very top doesn't need space above it, as the padding provides that */
div.qt-render > h1.qt-h1:first-child,
div.qt-render > h2.qt-h2:first-child {
    margin-top: 0;
}

/* Two or more blank lines: adds a second paragraph gap to the one already there */
div.qt-render div.qt-extra-space {
    height: var(--qt-paragraph-gap);
}

div.qt-render div.qt-li-1,
div.qt-render div.qt-li-2 {
    position: relative;
    margin-bottom: var(--qt-list-item-gap);
}

div.qt-render div.qt-li-1 {
    padding-left: var(--qt-list-indent-1);
}

div.qt-render div.qt-li-2 {
    padding-left: var(--qt-list-indent-2);
}

div.qt-render div.qt-li-1::before,
div.qt-render div.qt-li-2::before {
    position: absolute;
    color: var(--qt-bullet-color);
    transform: scale(var(--qt-bullet-scale));
}

div.qt-render div.qt-li-1::before {
    content: var(--qt-bullet-1);
    left: calc(var(--qt-list-indent-1) - var(--qt-bullet-gap) - 0.4em);
}

div.qt-render div.qt-li-2::before {
    content: var(--qt-bullet-2);
    left: calc(var(--qt-list-indent-2) - var(--qt-bullet-gap) - 0.4em);
}

div.qt-render strong.qt-bold {
    font-weight: var(--qt-bold-weight);
}

div.qt-render em.qt-italic {
    font-style: italic;
}

/* Inline code. Its size is relative to the text around it, so it scales with headings too. Spaces
   are kept as typed, like everything else within it. */
div.qt-render code.qt-code {
    white-space: pre-wrap;
    font-family: var(--qt-code-font);
    font-size: var(--qt-code-size);
    color: var(--qt-code-color);
    background-color: var(--qt-code-background);
    padding: var(--qt-code-padding);
    border-radius: var(--qt-code-radius);
}

/* A code block. Lines are never wrapped, the block scrolling sideways instead. Its size is
   relative to the document's, as it has no surrounding text to follow. */
div.qt-render pre.qt-pre {
    margin: 0 0 var(--qt-paragraph-gap) 0;
    overflow-x: auto;
    white-space: pre;
    tab-size: var(--qt-tab-size);
    font-family: var(--qt-code-font);
    font-size: var(--qt-code-size);
    line-height: var(--qt-code-block-line-height);
    color: var(--qt-code-color);
    background-color: var(--qt-code-background);
    padding: var(--qt-code-block-padding);
    border-radius: var(--qt-code-radius);
}

div.qt-render hr.qt-hr {
    border: none;
    border-top: var(--qt-rule-thickness) solid var(--qt-rule-color);
    margin: var(--qt-rule-margin);
}

/* An indented line within a paragraph, a block of its own so its indent applies however it
   wraps (see RenderHtml.renderLines) */
div.qt-render span.qt-indent-1,
div.qt-render span.qt-indent-2 {
    display: block;
}

div.qt-render span.qt-indent-1 {
    padding-left: var(--qt-indent-1);
}

div.qt-render span.qt-indent-2 {
    padding-left: var(--qt-indent-2);
}

/* The Preview layout's hidden copy of the editor's textarea (see PreviewScrollSync), which lays
   out its lines so where each one wraps to can be measured. Fonts, padding and width are copied
   from the textarea when measuring. */
div.preview-scroll-mirror {
    position: absolute;
    top: 0;
    left: -10000px;
    visibility: hidden;
    box-sizing: content-box;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Links the editor and Render View in the Preview layout: a box centred on the gap between their
   headers. The connector itself takes no space, its negative margins cancelling the extra gap
   the panes container would leave for it. */
div.text-preview-connector {
    position: relative;
    flex: 0 0 0;
    width: 0;
    margin: 0 -8px;
    align-self: flex-start;
    z-index: 1;
}

/* Centred on the header's background, above its bottom border: the pane's 2px top border plus
   half of a 28px button with 8px padding above and below. Needs updating if those change.
   Padded more than a flat button, so it doesn't look clickable. */
div.text-preview-connector-box {
    position: absolute;
    left: 0;
    top: 24px;
    transform: translate(-50%, -50%);
    padding: 4px 12px;
    background-color: ghostwhite;
    border: 1px solid navy;
    border-radius: 4px;
    cursor: default;
}

img.text-preview-connector-icon {
    display: block;
    width: 20px;
    height: 20px;
}