#mermaid-svg.flowchart {
  g.node > rect {
    outline: 2px dashed #000000;
    transition: outline 10.1s ease-in-out;
    stroke: none;
    fill: #ffffff;
  }

  g.node[highlighted] > rect {
    fill: var(--highlighted-color);
  }

  g.node:is(.expanded, .unexpanded) > rect {
    outline: 3px solid #000000;
  }
}

#mermaid-svg.classDiagram {
  g.node > :is(.label-container, .divider) > path {
    stroke-dasharray: 5, 5;
    fill: #ffffff;
    stroke: #000000;
    stroke-width: unset;

    &[stroke='none'] {
      stroke: none;
    }
  }

  g.node[highlighted] > .label-container > path {
    fill: var(--highlighted-color);
  }

  g.node:is(.expanded, .unexpanded) > :is(.label-container, .divider) > path {
    stroke: #000000;
    stroke-dasharray: none;
    stroke-width: 3px;
  }
}

#mermaid-svg {
  g:is(.edges, .edgePaths) > path {
    fill-opacity: 0;
    stroke: #333333;
    fill: #333333;
  }

  g.edgePaths > path[highlighted] {
    stroke: red;
    fill: red;
  }

  g.edgeLabel[highlighted] .text-inner-tspan {
    fill: red;
  }

  g.edgeLabel[clickable]:hover {
    cursor: pointer;
  }

  g.edgeLabel .label rect {
    opacity: 0.5;
    background-color: rgba(232, 232, 232, 0.8);
    fill: rgba(232, 232, 232, 0.8);
  }

  .corner-sign {
    text-anchor: end;
    font-size: 1.7rem;

    &:hover {
      transition: 0.25s;
      fill: red;
    }
    &::after {
      transform: translate();
      fill: red;
    }
  }

  /* 
    make it so markers colours match those of their lines (note the duplicate class to increase specificity). 
    Note !important is necessary as it's used in the style tag generated by mermaid 
  */
  .marker.marker {
    stroke: context-stroke !important;
    fill: context-fill !important;
  }
}