body {
  --font-mermaid: var(--font-monospace);
}

div.mermaid svg .nodes node * {
  stroke: var(--color-base-20);
}

.theme-light .mermaid > svg[aria-roledescription="flowchart-v2"],
.theme-dark .mermaid > svg[aria-roledescription="flowchart-v2"] {
  filter: none;
}

.mermaid > svg[aria-roledescription="flowchart-v2"]g.root {
  /* Edge labels */
  & g.edgeLabels {
    & div.labelBkg {
      display: contents !important;

      & .edgeLabel p {
        color: var(--text-normal) !important;
        font-size: var(--font-ui-small) !important;
        vertical-align: super;
        padding-inline: 0.2rem;
        background-color: var(--background-primary) !important;
      }
    }
  }

  /* Nodes */
  & g.nodes {
    /* Node labels */
    & div:has(.nodeLabel) {
      display: block !important;

      & .nodeLabel p {
        color: var(--text-normal) !important;
      }
    }

    /* Node default colors */
    & g :is(*) {
      stroke: var(--text-faint) !important;
      fill: var(--background-secondary) !important;
      fill-opacity: calc(var(--dimmed) - 0.25) !important;
    }

    /* Colorize individual nodes with classes */
    & g.red :is(*) {
      fill: rgba(var(--color-red-rgb), var(--dimmed)) !important;
      stroke: var(--color-red-rgb) !important;
    }

    & g.purple :is(*) {
      fill: rgba(var(--color-purple-rgb), var(--dimmed)) !important;
      stroke: var(--color-purple-rgb) !important;
    }

    & g.cyan :is(*) {
      fill: rgba(var(--color-cyan-rgb), var(--dimmed)) !important;
      stroke: var(--color-cyan-rgb) !important;
    }

    & g.yellow :is(*) {
      fill: rgba(var(--color-yellow-rgb), var(--dimmed)) !important;
      stroke: var(--color-yellow-rgb) !important;
    }

    & g.blue :is(*) {
      fill: rgba(var(--color-blue-rgb), var(--dimmed)) !important;
      stroke: var(--color-blue-rgb) !important;
    }

    & g.green :is(*) {
      fill: rgba(var(--color-green-rgb), var(--dimmed)) !important;
      stroke: var(--color-green-rgb) !important;
    }

    & g.orange :is(*) {
      fill: rgba(var(--color-orange-rgb), var(--dimmed)) !important;
      stroke: var(--color-orange-rgb) !important;
    }
  }
}

.mermaid {
  padding: 16px 8px;
}
