:root {
  --w7-gold: #c8a45d;
  --w7-surface: #f7f7f5;
  --w7-border: #d8d8d2;
}

[data-md-color-scheme="slate"] {
  --w7-surface: #17191d;
  --w7-border: #43464d;
}

.md-typeset .mermaid {
  margin: 1.5rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--w7-border);
  border-radius: 0.6rem;
  background: var(--w7-surface);
  cursor: zoom-in;
}

.md-typeset .mermaid svg {
  display: block;
  min-width: 42rem;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

.md-typeset .mermaid::after {
  content: "Click to enlarge";
  display: block;
  margin-top: 0.65rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  text-align: right;
}

html[lang="pt"] .md-typeset .mermaid::after {
  content: "Clique para ampliar";
}

.w7-diagram-dialog {
  width: min(96vw, 92rem);
  max-width: none;
  height: min(92vh, 60rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--w7-border);
  border-radius: 0.75rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.w7-diagram-dialog::backdrop {
  background: rgb(0 0 0 / 72%);
}

.w7-diagram-dialog__bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  border-bottom: 1px solid var(--w7-border);
}

.w7-diagram-dialog__close {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--w7-border);
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.w7-diagram-dialog__canvas {
  height: calc(100% - 3rem);
  padding: 1.5rem;
  overflow: auto;
}

.w7-diagram-dialog__canvas svg {
  display: block;
  min-width: 72rem;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 44rem) {
  .md-typeset .mermaid {
    margin-inline: -0.8rem;
    padding: 0.8rem;
    border-radius: 0;
  }

  .md-typeset .mermaid svg {
    min-width: 36rem;
  }
}