:root { /* defaults */
  --color-black: var(--dark);
  --color-blue: var(--blue);
  --color-red: var(--red);
  --color-yellow: var(--yellow);
  --color-green: var(--green);

  /* default highlight color */
  --highlight-color: var(--color-black);
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.svgContainer {
  position: relative;
  * {
    user-select: none;
  }

  text {
    font-family: "B612 Mono", "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    stroke: rgba(255, 255, 255, 1);
    stroke-alignment: outer;
  }

  .svgDrag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .bg {
    fill: var(--bg-fill);
    stroke: var(--bg-stroke);
  }
  .fg {
    fill: var(--fg-fill);
    stroke: var(--fg-stroke);
  }
  .icon {
    fill: var(--icon-fill);
  }

  .outerMiniMap {
    fill: rgba(0, 123, 255, 0.125);
    stroke: rgba(0, 0, 0, 0.5);
  }
  .innerMiniMap {
    fill: rgba(0, 123, 255, 1);
    stroke: rgba(0, 0, 0, 0.5);
  }

  .emptyContainer,
  .loadingContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    & > * {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}