:root {
  --active-code-color: #ffffc0;
  --smol-value-background: #ddd;
  --smol-value-color: black;
  --smol-value-padding-x: 0.25rem;
  --smol-value-border-radius: 0.25rem;

  --v-primitive-background: #808;
  --v-primitive-color: white;
  --v-closure-background: blue;
  --v-closure-color: white;
  --v-dynamic-closure-background: #369;
  --v-dynamic-closure-color: #ffc;
}

* {
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
}

.fill-space {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
}

.inline-panel-buttons > button {
    display: inline-block;
    padding: 0 !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    text-align: center;
    border: 0;
}

.bx--modal-container {
  max-width: 100vw; /* workaround for weirdness on mobile */
}

/*---------------------------------------------------------------------------*/

.comma-separated > :nth-child(n+2):before { content: ', ' }
.comma-separated > :nth-child(n+2):last-child:before { content: ' and ' }
.comma-separated > :last-child:after { content: '.' }
.comma-separated.no-period > :last-child:after { content: '' }

/*---------------------------------------------------------------------------*/
/* SmolEditor dynamically-added classes */

.smol-active-code-line, .cm-activeLine.smol-active-code-line { background-color: var(--active-code-color); }
.smol-active-code-eval { background-color: yellow; }
.smol-active-code-apply { background-color: lightgreen; }
.smol-context-span { background-color: #bef; }

.smol-interpreter-error { background-color: pink; color: black; }
.smol-interpreter-error .smol-active-code-eval, .smol-interpreter-error .smol-active-code-apply {
  background-color: inherit;
}

.smol-parse-error {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1px;
}
.smol-error-gutter {
  padding-right: 0.2rem;
  line-height: 1;
}
.smol-error-gutter .smol-error-gutter-symbol {
  color: red;
  font-size: 1.5rem;
  position: relative;
  top: -0.35rem;
}

.smol-available-value.smol-shown-value:before { content: '='; padding-right: var(--smol-value-padding-x); }
.smol-available-value.smol-shown-value {
  background: var(--smol-value-background);
  color: var(--smol-value-color);
  padding: 0 var(--smol-value-padding-x);
  border-radius: var(--smol-value-border-radius);
}
.smol-available-value .smol-value { font-family: inherit; }

.smol-available-value.smol-hidden-function {
  margin-left: 0.166rem;
  width: 0.666rem;
  display: inline-block;
  height: 0.666rem;
  border-radius: 0.333rem;
}
.smol-available-value.smol-hidden-function.v-primitive { background: var(--v-primitive-background); }
.smol-available-value.smol-hidden-function.v-closure { background: var(--v-closure-background); }
.smol-available-value.smol-hidden-function.v-dynamic-closure { background: var(--v-dynamic-closure-background); }