.mermaid-panzoom {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: auto;
  border: 1px solid transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mermaid-panzoom.active {
  overflow: hidden;
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 2px rgba(156, 192, 226, 0.16);
  touch-action: none;
}

.mermaid-panzoom > .mermaid {
  display: block;
  box-sizing: border-box;
  width: var(--tool-mermaid-render-width, 100%);
  min-width: var(--tool-mermaid-render-min-width, var(--tool-mermaid-min-width, 100%));
  transform-origin: 0 0;
}

.mermaid-panzoom > .mermaid.mermaid-natural-scale {
  margin-right: auto;
  margin-left: auto;
}

.mermaid-panzoom > .mermaid.mermaid-wide {
  --tool-mermaid-min-width: 980px;
}

.mermaid-panzoom > .mermaid.mermaid-medium {
  --tool-mermaid-min-width: 820px;
}

.mermaid-panzoom > .mermaid.mermaid-tall {
  --tool-mermaid-min-width: 720px;
}

.mermaid-panzoom::after {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.12rem 0.42rem;
  color: var(--muted);
  font-family: var(--md-code-font-family);
  font-size: 0.55rem;
  letter-spacing: 0;
  pointer-events: none;
  content: "Click to enable zoom";
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 160ms ease;
}

[data-md-color-scheme="slate"] .mermaid-panzoom::after {
  background: rgba(17, 24, 32, 0.88);
}

.mermaid-panzoom:hover::after {
  opacity: 1;
}

.mermaid-panzoom.active::after {
  color: var(--blue);
  content: "Scroll to zoom / drag to pan / Esc to exit";
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .mermaid-panzoom::after {
    content: "Tap to enable zoom";
  }

  .mermaid-panzoom.active::after {
    content: "Pinch to zoom / drag to pan / tap outside to exit";
  }
}

@media screen and (max-width: 620px) {
  .mermaid-panzoom > .mermaid,
  .mermaid-panzoom > .mermaid.mermaid-wide,
  .mermaid-panzoom > .mermaid.mermaid-medium,
  .mermaid-panzoom > .mermaid.mermaid-tall {
    --tool-mermaid-min-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}