@import url('https://unpkg.com/@observablehq/inspector@5.0.1/src/style.css');

@font-face {
  font-family: 'FontWithASyntaxHighlighterLightOwl';
  src:
    url('./fonts/FontWithASyntaxHighlighterLightOwl-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'FontWithASyntaxHighlighter';
  src:
    url('./fonts/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  font-weight: 400;
}

/** keep in sync with libertine.css */
:root {
  --monospace-font-family: Menlo, Consolas, monospace;
  --mono_fonts: 82%/1.5 var(--monospace-font-family);
}

.echo {
  display: block;
  font-family: "FontWithASyntaxHighlighterLightOwl", var(--monospace-font-family);
  font-feature-settings: "colr", "calt";
  white-space: pre;
  font-size: 0.83rem;
  line-height: 1.42;

  padding: 1ch;
  /* cloned by libertine.css */
  overflow: auto;
  background-color: #f3f3f3;
  border-radius: 4px;
}


.echo.dark {
  font-family: "FontWithASyntaxHighlighter", var(--monospace-font-family);
  background-color: #282828;
  color: #eee;
}


.echo[contenteditable]:hover {
  box-shadow: inset 0 0 0 1px #8b99c8;
}

.echo[contenteditable].dark:hover {
  box-shadow: inset 0 0 0 3px #8b99c8;
}
script.reflect::before {
  content: "<script data-display=\"" attr(data-display) "\" type=\"" attr(type) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

script.reflect::after {
  content: "<\/script>";
}

style.reflect::before {
  content: "<style id=\"" attr(id) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

style.reflect::after {
  content: "<\/style>";
}

.observablehq {
  display: inline;
}

@keyframes braille-spin {
  0% {
    content: '\280B';
  }
  10% {
    content: '\2819';
  }
  20% {
    content: '\2839';
  }
  30% {
    content: '\2838';
  }
  40% {
    content: '\283C';
  }
  50% {
    content: '\2834';
  }
  60% {
    content: '\2826';
  }
  70% {
    content: '\2827';
  }
  80% {
    content: '\2807';
  }
  90% {
    content: '\280F';
  }
  100% {
    content: '\280B';
  }
}

.observablehq.observablehq--running,
.observablehq.observablehq--error {
  display: inline-block;
  position: relative;
}

.observablehq.observablehq--running::before,
.observablehq.observablehq--error::before {
  position: absolute;
  right: 100%;
  margin-right: 0.3em;
  top: 50%;
  transform: translate(1px, -50%);
  pointer-events: none;
}

.observablehq.observablehq--running::before {
  content: '\280B';
  color: #6f7783;
  animation: braille-spin 1s linear infinite;
}

.observablehq.observablehq--error::before {
  content: '!';
  color: #e7040f;
}

.observablehq.observablehq--running:empty {
  min-width: 1ch;
  min-height: 1em;
}

/* .observablehq:before {
  content: "";
  position: absolute;
  left: -14px;
  height: 100%;
  width: 4px;
  transition: background-color .25s linear
}

.observablehq--error:before {
  background-color: #e7040f
}

.observablehq--changed:before,.observablehq--running:before {
  background-color: #a9b0bc;
  transition: none
} */