.Token {
  /* animation: Token-appear 1s forwards linear; */

  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: pre;
  font-size: 1em;

  &.foreign {
    color: brown;
    font-weight: bold;
  }

  &.punctuation {
    color: gray;
  }

  &.keyword {
    font-weight: bold;
  }

  &.break {
    flex-basis: 100%;
    height: 0;
  }

  &.indentation {
    width: calc(var(--Handle--width) + 0.5em);
    justify-content: flex-end;
  }

  &.ghost {
    color: color-mix(in hsl, black, transparent 80%);
  }

  &.before-extra-Arg-kid,
  &.after-extra-Arg-kid {
    color: red;
  }

  &.before-empty-Arg-kids + .Point {
    box-shadow: 0 0 0 0.1em red inset;
  }

  &.beforeHolePoint,
  &.afterHolePoint {
    width: var(--Handle--width);
  }

  &.beforeHolePoint + .Point {
    box-shadow: 0 0 0 0.1em red inset;
  }

  &.beforeExtraKid,
  &.afterExtraKid {
    color: red;
  }

  &.missing {
    display: none;

    & + .Point {
      margin: 0 0.5em;
      box-shadow: 0 0 0 0.1em var(--Editor--background) inset,
        0 0 0 0.2em red inset;
    }
  }

  &.error {
    color: red;
    font-weight: bold;
    white-space: pre;
  }

  &.value {
    color: darkgreen;
    font-weight: bold;
    text-decoration: underline;
  }
}

@keyframes Token-appear {
  0% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.5);
  }

  0% {
    transform: scaleY(1);
  }
}

@keyframes missing-passive {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }

  25% {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7),
      0 0 16px rgba(255, 0, 255, 0.5) inset, 0 0 20px #ff00ff;
  }

  50% {
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.7),
      0 0 8px rgba(255, 255, 0, 0.5) inset, 0 0 10px #ffff00;
  }

  75% {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7),
      0 0 16px rgba(0, 255, 0, 0.5) inset, 0 0 20px #00ff00;
  }

  100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.7),
      0 0 8px rgba(0, 255, 255, 0.5) inset, 0 0 10px #00ffff;
  }
}