/* Styling that is required for DomTerm to work sanely.
 * "True" optional styling should go in domterm-default.css.
 */
span.tail-hider { position: absolute; right: 0px; bottom: 0px }
span.tail-hider[domterm-hiding="true"]:before {content: "\25B6" }
span.tail-hider:before {content: "\25BC" }
span.error-exit-mark { position: absolute; right: 0px; bottom: 0px }
span.error-exit-mark:before { content: "\25CF"; color: red }
div.input-line, div.command-group, div.domterm { position: relative }

html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden }
div.domterm { -webkit-user-select: text; overflow: hidden }
div.dt-buffer { overflow-x: hidden }
div.domterm { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px }
div.dt-buffers { overflow-y: scroll;  width: 100%; height: 100%; }
div.domterm.xterm { overflow-y: hidden }
div.domterm.domterm-noscript { word-break: break-all }
pre { padding: 0px; margin: 0px; }
/* NOTE: If .domterm is not the top-level element, it should
 *  be nested in a div with style="position: relative", so
 * .domterm-show-info's position: absolute works.  Setting position: relative
 * in the .domterm element doesn't work if we're scrolled. */
div.below-menubar { position: relative }
div.domterm-show-info {
    position: absolute;
    display: grid;
    z-index: 100;
    background-color: transparent
}
div.domterm-show-info > div {
    justify-self: end;
    overflow-wrap: anywhere;
}
div.domterm-pre span.dt-cluster.w1 {
    display: inline-block;
    text-align: center;
    width: var(--char-width);
    height: var(--char-height);
}
div.domterm-pre span.dt-cluster.w2 {
    display: inline-block;
    text-align: center;
    width: var(--wchar-width);
    height: var(--char-height);
}
/* FUTURE POPUP
div.domterm-main-popup {
    position: fixed;
    z-index: 100;
    background-color: inherit
}
*/
/* We use <div class="domterm-pre"> instead of <pre> for regular terminal lines.
 * The reason is that <Copy> on some browsers adds *two* newlines between adjacent
 * <pre> nodes.  This appears intentional, as it matches the new innerText spec.
 * FIXME The downside with not using <pre> is that "copy-as-HTML" becomes
 * less useful (without stylesheets). So we should either use <pre> and then
 * fix up the extra newline on copy-to-HTML; or copy-to-HTML should convert
 * the  <div class="domterm-pre"> to a <pre> node.
 */
div.domterm-pre {
    padding: 0px; margin: 0px; font-family: monospace;
    unicode-bidi: embed; white-space: pre }
div.domterm-pre { display: block; }
div.domterm-pre[domterm-hidden="true"] { display: none; visibility: hidden  }
div.domterm.domterm-noscript div.domterm-pre { white-space: pre-wrap }
span[class="wrap"] {padding: 0px; margin: 0px; white-space: nowrap }
span { padding: 0px; margin: 0px;}
span[line="soft"] { padding: 0px; margin: 0px;}
span[std="prompt"] { margin: 0px; padding: 0px; border: 0px }
span[content-value]:before { content: attr(content-value) }
span[content-value] canvas { position: absolute; left: 0px }
*[domterm-hidden="true"] { display: none }

span[line][breaking="yes"] > span.pprint-pre-break,
span[line][breaking="yes"] > span.pprint-post-break,
span[line][breaking="yes"] > span.pprint-indent {
    visibility: visible; position: static }
span[line][breaking="yes"] > span.pprint-non-break,
span[line] > span.pprint-pre-break,
span[line] > span.pprint-post-break,
span.pprint-indent {
    visibility: hidden; position: absolute }

div.domterm span.focus-caret {
    caret-color: transparent;
    position: relative;
    z-index: 1;
    --focus-color: #a0522d; /* sienna */
    pointer-events: none;
}
div.domterm span.focus-caret span {
    position: absolute;
    top: 0px; bottom: 0px;
}

/* Doesn't seem to work on Chrome */
div.domterm span[std="caret"] {
    caret-color: transparent;
    user-select: all;
}

.hide-selection *::selection {
    color: inherit;
    background-color: inherit;
}

div.dt-popup-panel {
    position: fixed;
    z-index: 2;
}

div.show-connection-failure {
    position: fixed;
    background: var(--background-color);
    z-index: 2;
    border: solid red medium;
    padding: 2ex;
}
div.show-connection-failure div.domterm-pre { white-space: pre-wrap }

div.dt-titlebar {
    -webkit-app-region: drag; background-color: #dcdcdc; padding-left: 2px;
    display: flex; flex-direction: row; justify-content: space-between;
    -webkit-user-select: none; user-select: none; }
div.dt-titlebar img { height: 1rem }
.dt-titlebar-button { -webkit-app-region: no-drag; padding: 0px 3px }
