.label {
  font-family: var(--mermaid-font-family);
  color: var(--grey-7);
  font-size: $font-size-small;
}

.label text {
  fill: var(--text-color);
}

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
  fill: var(--grey-1);
  stroke: var(--text-color);
  stroke-width: .0625rem;
}

.node .label {
  text-align: center;
}
.node.clickable {
  cursor: pointer;
}

.arrowheadPath {
  fill: var(--text-color);
}

.edgePath .path {
  stroke: var(--text-color);
}

.flowchart-link {
  stroke: var(--text-color);
  fill: none;
}

.edgeLabel {
  background-color: var(--grey-2);
  rect {
    opacity: .8;
    fill: var(--grey-2) !important;
  }
  text-align: center;
}

.cluster rect {
  fill: var(--grey-2);
  stroke: var(--text-color);
  stroke-width: .0625rem;
}

.cluster text {
  fill: var(--text-color);
}

div.mermaidTooltip {
  position: absolute;
  text-align: center;
  max-width: 12.5rem;
  padding: .125rem;
  font-family: var(--mermaid-font-family);
  font-size: .75rem;
  background: var(--grey-1);
  border: .0625rem solid var(--text-color);
  border-radius: .125rem;
  pointer-events: none;
  z-index: $zindex-3;
}