.repl-result,
.repl-result-like {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repl-block.error .repl-result {
  flex-direction: column;
}
.repl-result[data-stream] {
  /* streaming output of stdout; make sure stderr occurs below */
  flex-direction: column;
}
.repl-result > p:not(:first-child) {
  padding-top: 1rem;
}
.repl.sidecar-visible p {
  white-space: normal;
}
.repl {
  .repl-prompt {
    margin-right: 0.25rem;
    --color-prompt-text: var(--color-brand-01);
    --color-prompt-background: transparent;
    color: var(--color-prompt-text);
  }
  .repl-input:not(.kui--isearch-active) .repl-prompt {
    font-weight: 500;
    font-family: var(--font-sans-serif);
  }
  .repl-context {
    background-color: var(--color-prompt-background);
    letter-spacing: 0.16px;
    filter: grayscale(20%);
  }

  .repl-prompt-righty {
    font-weight: 700;
    text-shadow: 0 0 1px var(--color-text-02);
  }

  .repl-prompt-righty .repl-temporary {
    display: flex;
    align-items: center;
  }

  /* repl right-hand decorations */
  .repl-prompt-right-elements {
    display: flex;
    align-items: center;
    flex: 0;
    white-space: nowrap;
    margin-left: 1rem;
    height: 1.25rem; /* so kui--repl-block-spinner doesn't cause shift */
  }
  .kui--repl-prompt-buttons {
    margin-right: 1rem;
  }
  .kui--repl-prompt-buttons .graphical-icon {
    opacity: 0.0375;
  }
  .kui--repl-block-spinner {
    color: var(--color-brand-03);
    margin-right: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
  }
  .kui--repl-block-error-icon {
    fill: var(--color-error);
    margin-right: 0.5rem;
  }
}

[kui-theme-style] .kui--repl-block-right-element {
  color: inherit;
  font-size: 0.875rem;
}

.repl-result,
.repl-result-like,
.repl-input .repl-input-element,
.repl-input-like {
  font-size: 1rem;
}
.repl-block:not(.processing) .repl-result-like:last-child {
  margin-bottom: 0.375rem;
}
.repl-input .repl-input-element,
.repl-input-like {
  --color-caret: var(--color-support-01);
  color: var(--color-text-01);
  background: transparent;
  border: none;
  flex: 1;
  caret-color: var(--color-caret);
  overflow: hidden;
  white-space: nowrap;
  padding: 1px; /* to match user-agent styling of <input/> */
  /* text-overflow: ellipsis; see https://github.com/IBM/kui/issues/3539 */
}
.kui--prompt-like:empty {
  border-right: 1ex solid var(--color-caret);
}
.repl-input input:focus,
.repl-input-like:focus {
  outline: none;
}

.repl-block.valid-response .oops,
.repl-block.error .oops,
.clickable.oops,
.oops .oops-text-on-oops,
.red-text {
  opacity: 1 !important;
  white-space: pre-wrap;
}
.header .clickable.oops {
  font-weight: 900;
}
.repl-input,
.repl-output {
  display: flex;
}
.repl-block .result-vertical {
  flex-direction: column;
}
.repl-block .whitespace {
  white-space: pre-wrap;
}
.repl-block.processing .repl-output,
.repl-block.valid-response .repl-output {
  display: flex;
  /* align-items: flex-start; */
}
.sidecar-visible tab:not(.sidecar-is-minimized) .repl-block.processing .repl-output,
.sidecar-visible tab:not(.sidecar-is-minimized) .repl-block.valid-response .repl-output {
  align-items: stretch;
}
.repl-result-spinner {
  font-size: 0.875rem;
}
.repl-block .repl-output [data-stream] ~ .repl-result-spinner {
  /* probably not 100% right, but: for pty output, don't show kui's "caret", since xtermjs has its own */
  display: none;
}
.repl-block.processing .repl-input .repl-input-element {
  color: var(--color-name);
}
.repl-block.processing .repl-result-spinner-inner {
  /* animation: spin 750ms linear infinite; */
  height: auto;
  width: auto;
  opacity: 1;
  transition-delay: 100ms; /* only show the spinner block if the command takes a bit longer */
  display: inline-block;
  background-color: var(--color-processing);
  margin-bottom: 0.25rem;
}
.repl-block.processing .repl-result-spinner-inner:after {
  content: '\00a0';
}
.repl-result pre {
  margin: 2px 0; /* firefox needs some vertical padding, otherwise descenders like "y" crop; weird */
  white-space: pre-wrap;
}
.repl-result code {
  /* more invocation results */
  /* here, we override the highlight.js theme, when rendering in the repl */
  background: transparent;
  color: var(--color-text-01);
}

/* timestamp */
.kui--repl-block-timestamp {
  margin-right: 0.5em;
}
/* timestamp when sidecar is visible */
.repl.sidecar-visible .repl-block {
  .kui--repl-block-timestamp {
    /* hide repl timestamp  */
    display: none;
  }
}

/* e.g. reverse-i-search; see Input.tsx */
.repl-input-element.repl-input-hidden {
  opacity: 0;
  width: 0;
}

.repl {
  opacity: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: 4;
  background-color: var(--color-repl-background);
}
.kui--repl-message {
  padding-top: 0.5rem;
  background-color: var(--color-repl-background);
}
.repl-inner {
  overflow-y: auto;
  flex: 1;
}
.repl-block {
  margin: 0.5rem 0 0; /* margin vs padding to help with screenshot rubber banding */
  padding: 0;
  display: flex;
  flex-direction: column;
}
.repl,
.repl-input .repl-input-element {
  font-family: var(--font-monospace);
}

.repl-block {
  .repl-input {
    flex-direction: column;

    .kui--input-and-context {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }

  .repl-output {
    .repl-result {
      pre:empty {
        display: none;
      }
    }

    .ok {
      color: var(--color-ok);
    }

    &.valid-response .oops {
      /* oops output often times doesn't word wrap nicely on its own, e.g. help/usage; issue #396 */
      word-break: break-all;
    }
  }
}
