/* Optional - user-overridable styling */

div.domterm.markmode *::selection {background-color: slateblue; color: #FFF }

/* "\2936" is "arrow pointing downwards then curving leftward".
It is used to indicate a wrapped line, rather like a hyphen. */
span[breaking="yes"][line="soft"]:before {content: "\2936" "\A"; }
div.domterm {
    /* A light color used for the default background in normal mode,
       or used for default foreground (text) in reverse-video mode.
       This value suggested by Tufte CSS - less harsh than pure white. */
    --main-light-color: #fffff8;
    /* A dark color used for the default foreground (text) in normal mode,
       or used for default background in reverse-video mode. */
    --main-dark-color: black;
}
div.domterm {
    color: black; background-color: #fffff8; /* fallback if var not handled */
    --background-color: var(--main-light-color);
    --foreground-color: var(--main-dark-color);
    --spacer-color:  #F0F0F8;
    --input-line-color: #ECECC8;
    --input-span-color: #FFFFD0 /* a pale yellow */;
    overflow-x: auto;
    padding: 0px 0px 1px 2px;
    background-image: repeating-linear-gradient(
      45deg,
      var(--spacer-color),
      var(--spacer-color) 5px,
      transparent 5px,
      transparent 15px
  );
}
div.dt-buffer {
    background-color: var(--background-color);
    color: var(--foreground-color);
}
div.domterm[reverse-video] {
    color: #fffff8; background-color: black; /* fallback if var not handled */
    --background-color: var(--main-dark-color);
    --foreground-color: var(--main-light-color);
    --spacer-color:  #101040;
    --input-line-color: #505030;
    --input-span-color: #404020;
}
div.domterm-spacer {
}

/* Tufte CSS suggests: Consolas, "Liberation Mono", Menlo, Courier, monospace
   However, the first four in that list cause some vertical spacing issues,
   including background-color not being full-height.
   Check with tests/256-colors.sh. */
div.domterm { --monospace-family: Terminal; }
div.domterm-pre, span.docutils.literal { font-family: var(--monospace-family),monospace }
div.domterm[reverse-video] span[std="prompt"] { background-color: #006000 } /* a dark green */
span.editing[std="input"] { outline: 2px dashed #a0522d80 } /* sienna 50% */
div.domterm-show-info span.editing {
    font-family: var(--monospace-family);
    padding: 0px 2px;
    outline-width: 1px;
    outline-style: solid;}
div.find-text button#find-button-kind { margin-left: 0.3em }
div.find-text button#find-button-kind:after { content: " \1401" }
div.domterm-show-info div.find-text span.find-result {
    color: gray; padding: 0px 0.2em }

div.domterm-show-info button.find-text-button {
    border-color: #ccc; border-width: thin;  border-style: solid;
    border-radius: 0.3ex;
    padding: 1px; margin: 0px 0.6px;
}
div.find-text[search-direction="backwards"] button#find-button-previous,
div.find-text[search-direction="forwards"] button#find-button-next {
    border-color: #000;
}
div.find-text.no-matches button#find-button-previous,
div.find-text.no-matches button#find-button-next {
    display: none
}
div.domterm-show-info div.find-text span.find-result.not-found { color: #ff3030 }
div.input-line { background-color: var(--input-line-color) } /* a very pale yellow */
span[std="input"], span.focus-area { background-color: var(--input-span-color) } /* a pale yellow */
span[std="prompt"] { background-color: #E8FFE8 } /* a pale green */
span[std="error"] { color: red; }
span[std="hider"]:hover { background-color: yellow; color: red; cursor: pointer }
div.domterm-show-info {
    right: 4px;
    max-width: 80%;
    top: 1ex;
    padding: 1px 4px;
}
div.domterm-show-info.domterm-moving {
    outline: thin dashed orange;
}
div.dt-moving {
    cursor: move;
}
div.domterm-show-info div.domterm-show-info-header {
    visibility: hidden;
    outline: thin solid blue;
    width: 100%;
}
div.domterm-show-info:hover div.domterm-show-info-header {
    visibility: visible;
}
div.domterm-show-info-header {
    display: flex; flex-direction: row-reverse;
    line-height: 90%;
}
div.domterm-show-info-header span {
    cursor: pointer }
div.domterm-show-info-header span::after {
    content: "\2612" }
div.domterm-info-widget {
    border: thin solid mediumblue;
    width: auto;
    padding: 2px;
    margin-top: 1px;
    font-size: small;
    background-color: var(--background-color)
}

div.domterm span[caret="block"][std="caret"], div.domterm span[caret="blinking-block"][std="caret"] {
    color: #fffff8; background-color: black; /* fallback if var not handled */
    background-color: var(--foreground-color); color: var(--background-color);
}
div.domterm {
    --caret-blink-count: 20
}
div.domterm span[caret="underline"][std="caret"], div.domterm span[caret="blinking-underline"][std="caret"] {
    text-decoration: underline
}
div.domterm span[caret="bar"][std="caret"], div.domterm span[caret="blinking-bar"][std="caret"] {
    border-right: 2px solid red; margin-right: -2px
}

div.domterm span.focus-caret-line {
    border-style: dashed dashed dashed none;
    border-color: var(--focus-color);
    border-width: 1px;
    left: -4px;
    width: 8px;
    opacity: 0.4;
    box-sizing: border-box
}
div.domterm.paused span.focus-caret-line {
    border-style: solid solid solid none;
}
div.domterm span.focus-caret-mark {
    left: -1px;
    width: 2px;
    background-color: var(--focus-color);
}
div.domterm.focusmode span.focus-caret{
    --focus-color: purple;
}
div.domterm.markmode span.focus-caret {
    --focus-color: orange;
}
div.domterm-active span[caret="blinking-block"][std="caret"],
div.domterm-active span[caret="blinking-bar"][std="caret"],
div.domterm-active span[caret="blinking-underline"][std="caret"] {
    animation: blinking-caret 1.5s steps(1) 0s var(--caret-blink-count);
}
div.domterm-active span[caret="blinking-block"][std="caret"][value],
div.domterm-active span[caret="blinking-bar"][std="caret"][value],
div.domterm-active span[caret="blinking-underline"][std="caret"][value] {
    animation: blinking-caret-lineend 1.5s steps(1) 0s var(--caret-blink-count);
}
span[caret][std="caret"][value]:after {
    content: attr(value);
}
@keyframes blinking-caret {
    0% { }
    30% { border-right: inherit; margin-right: inherit;
          background-color: inherit; color: inherit; text-decoration: inherit }
    100% {}
}
@keyframes blinking-caret-lineend {
    0% { }
    30% { border-right: inherit; margin-right: inherit;
          background-color: var(--input-line-color); color: inherit; text-decoration: inherit }
    100% {}
}
div.domterm a.matched:not(:hover) { color: inherit; }
div.domterm a.plain:not(:hover) { text-decoration: inherit; }
div.domterm h2,
div.domterm h3,
div.domterm p,
div.domterm dl {
    margin-top: 0.2ex; margin-bottom: 0.3ex; }
div.domterm h1 {
    margin-top: 0.2ex;
    margin-bottom: 0.4ex; }
/* Below match "main" but not "main only" */
div.dt-buffer + div.dt-buffer {
    border-top: thick double green }
div.dt-buffer[buffer~="main"] div.command-group {
    border-top: 1px solid #00C00080; margin-top: -1px;
    background-clip: padding-box
}

span.pending { background-color: lightgrey }
span.pending span[std="prompt"] { color: green, background-color: lightgrey }
span.url { font-family: sans-serif; font-size: inherit }

div.dt-popup-panel {
    width: 30em;
    min-width: 15em;
    max-width: 80%;
    border: thin solid sienna;
    border-radius: 6px;
}

div.dt-popup-panel > div {
    padding: 4px;
}

div.dt-popup-panel span.dt-close-button {
    float: right;
    padding: 2px;
}
div.dt-popup-panel, div.dt-popup-panel span.dt-close-button:hover,
.dt-titlebar-button:hover {
    background-color:  #ececec;
}

div.dt-popup-panel div.dt-overlay-titlebar {background-color: lightgrey; }

div.dt-context-popup {
    font-size: small;
    padding: 4px;
    width: 30em;
    min-width: 15em;
    max-width: 80%;
    border: thin solid sienna;
    border-radius: 6px;
    background: #ececec;
    /*position: relative;*/
    position: fixed;
}
a[domterm-href], a[href] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}
