@import '../_defines/const'
@import '../_custom'

pre.mermaid
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: $ff-body

.mermaid span,
.mermaid text
  font-family: $ff-body

.mermaid .edgeLabel
  padding: 4px
  background-color: var(--background) !important
  color: var(--text-p1) !important

.mermaid .edgeLabel text,
.mermaid .label text,
.mermaid .nodeLabel,
.mermaid .cluster-label text,
.mermaid .cluster-label span
  fill: var(--text-p1) !important
  color: var(--text-p1) !important

.mermaid rect.basic.label-container
  stroke: var(--block-border) !important
  fill: var(--block) !important

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path,
.mermaid .cluster rect
  stroke: var(--block-border) !important
  fill: var(--block) !important

_dark_mermaid()
  .mermaid
    fill: #ccc !important


  .mermaid .error-icon
    fill: #a44141 !important


  .mermaid .error-text
    fill: #ddd !important
    stroke: #ddd !important


  .mermaid .marker
    fill: lightgrey !important
    stroke: lightgrey !important


  .mermaid .marker.cross
    stroke: lightgrey !important


  .mermaid .label
    color: var(--text-p1) !important


  .mermaid .cluster-label text
    fill: var(--text-p1) !important


  .mermaid .cluster-label span
    color: var(--text-p1) !important


  .mermaid .label text,
  .mermaid span
    fill: var(--text-p1) !important
    color: var(--text-p1) !important


  .mermaid .node rect,
  .mermaid .node circle,
  .mermaid .node ellipse,
  .mermaid .node polygon,
  .mermaid .node path
    fill: var(--block) !important
    stroke: var(--block-border) !important


  .mermaid .arrowheadPath
    fill: lightgrey !important


  .mermaid .edgePath .path
    stroke: lightgrey !important


  .mermaid .flowchart-link
    stroke: lightgrey !important


  .mermaid .edgeLabel
    background-color: hsl(0, 0%, 34.4117647059%) !important


  .mermaid .edgeLabel rect
    background-color: hsl(0, 0%, 34.4117647059%) !important
    fill: hsl(0, 0%, 34.4117647059%) !important


  .mermaid .cluster rect
    fill: var(--block) !important
    stroke: var(--block-border) !important


  .mermaid .cluster text
    fill: var(--text-p1) !important


  .mermaid .cluster span
    color: var(--text-p1) !important


  .mermaid div.mermaidTooltip
    background: hsl(20, 1.5873015873%, 12.3529411765%) !important
    border: 1px solid rgba(255, 255, 255, 0.25) !important


  .mermaid .flowchartTitleText
    fill: #ccc


:root[data-theme="dark"]
  _dark_mermaid()
:root:not([data-theme])
  @media (prefers-color-scheme: dark)
    _dark_mermaid()