/*
 * Code blocks in task and ticket text (docs/internal/code-blocks-spec.md, CB9).
 * Loaded on every admin page, where the task window can open anywhere, and on
 * every customer portal page, in both themes.
 *
 * A code block is a plain <pre>. Bootstrap already draws one as a grey box;
 * what this adds is a code font and look, tabs four wide, lines kept as written
 * with a scrollbar for a long one, left to right in a right-to-left language,
 * and the same for the <pre><code> that TinyMCE's own code-sample button
 * writes (Bootstrap wraps that one mid-word).
 *
 * Scoped to where the text is shown, never to every <pre> on a page:
 *
 *   admin   #task_view_description          a task's description, also while
 *                                           it is edited in place
 *           #task-comments .comment-content task comments
 *           .zd-im-content.tc-content       internal messages (tasks, tickets)
 *           .ticket-thread .tc-content      a ticket's message and replies
 *   portal  #task .tc-content               a task's description
 *           #task-comments .comment-content task comments
 *           #ticket-reply ~ .panel_s        a ticket's message and replies, on
 *                                           the ticket page and the public one
 *
 * Every scope outweighs pre[class*=language-], one class and one element: the
 * Prism rule in TinyMCE's content.inline.min.css, which an inline editor adds
 * to the end of the page's <head> while it is open (a task's description being
 * edited, a contract, a proposal). A scope of the same weight loses to it on
 * order, and a code sample there turns black at 1em in Prism's own box. Hence
 * both classes of an internal message's text.
 *
 * The editors themselves are styled from admin-code-blocks.js.
 */

/*
 * width: 0 with min-width: 100% is what keeps a long line from widening the
 * page: the block fills its column but asks for no width of its own. Several
 * of these columns size to their content otherwise — a comment sits in
 * Bootstrap's .media-body, a table cell, and the portal's comment list is an
 * inline-block (themes/perfex/css/style.css:1217-1223) — so one 400-character
 * line pushed the whole page sideways. With the line in its own scrollbar,
 * nothing outside the block moves.
 */
#task_view_description pre,
#task-comments .comment-content pre,
.zd-im-content.tc-content pre,
.ticket-thread .tc-content pre,
#task .tc-content pre,
#ticket-reply ~ .panel_s .panel-body pre {
    display: block;
    width: 0;
    min-width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    tab-size: 4;
    -moz-tab-size: 4;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #c7254e;
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
}

/*
 * The portal's comment list would otherwise shrink to its widest comment, and
 * a comment holding only a code block, which now asks for no width, would be
 * drawn narrow. Where :has() is not supported the list keeps Perfex's own
 * layout, and the block still scrolls.
 */
#task-comments:has(pre) {
    display: block;
}

#task_view_description pre code,
#task-comments .comment-content pre code,
.zd-im-content.tc-content pre code,
.ticket-thread .tc-content pre code,
#task .tc-content pre code,
#ticket-reply ~ .panel_s .panel-body pre code {
    padding: 0;
    font: inherit;
    color: inherit;
    white-space: inherit;
    word-break: inherit;
    background: none;
    border-radius: 0;
}

/*
 * The Copy button (CB12): one element on <body>, which code-blocks-copy.js
 * puts over the top-right corner of the code block under the pointer, fixed
 * to the window. The script also sets its z-index, just above the block's own
 * layer: the task window, for one, is a modal at 10001. Every property the
 * button depends on is set here, so neither area's own rules for buttons
 * change it.
 */
.zd-code-copy {
    position: fixed;
    display: none;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    width: auto;
    height: 24px;
    margin: 0;
    padding: 0 8px;
    font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    color: #1f2328;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(31, 35, 40, 0.08);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.zd-code-copy.is-shown {
    display: inline-flex;
}

/* While text is selected with the mouse, the pointer goes through (code-blocks-copy.js, endDrag()). */
.zd-code-copy.is-passive {
    pointer-events: none;
}

.zd-code-copy:hover {
    background: #f3f4f6;
}

.zd-code-copy:focus-visible {
    outline: 2px solid #0969da;
    outline-offset: 1px;
}

.zd-code-copy.is-copied {
    color: #1a7f37;
}

.zd-code-copy-icon {
    display: inline-flex;
}

.zd-code-copy-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

@media print {
    .zd-code-copy {
        display: none !important;
    }
}