/* Mermaid diagram styling for Material for MkDocs */

/* Ensure diagrams are responsive */
.mermaid {
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: 1rem 0;
}

/* Improve diagram visibility */
.mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Style adjustments for better integration */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1px;
}

.mermaid .edgePath path {
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5px;
}

.mermaid .edgeLabel {
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font-family);
  font-size: 0.8rem;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node ellipse,
[data-md-color-scheme="slate"] .mermaid .node polygon {
  stroke: var(--md-default-fg-color--light);
  fill: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] .mermaid .edgePath path {
  stroke: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .mermaid text {
  fill: var(--md-default-fg-color) !important;
}

/* Ensure diagrams don't overflow on mobile */
@media screen and (max-width: 768px) {
  .mermaid {
    font-size: 0.8rem;
  }
}

/* Loading state */
.mermaid:not([data-processed]) {
  opacity: 0.5;
  position: relative;
}

.mermaid:not([data-processed])::after {
  content: "Loading diagram...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}