html[data-diagram-viewer] .md-grid {
  max-width: 90rem;
}

.diagram-viewer {
  --diagram-background: #fff;
  --diagram-line: var(--company-majority-dusty);
  --diagram-ink: var(--company-majority-midnight);
  margin: 1.5rem 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  background: var(--diagram-background);
  color: var(--diagram-ink);
}

[data-md-color-scheme="slate"] .diagram-viewer {
  --diagram-background: var(--company-majority-midnight);
  --diagram-line: var(--company-majority-coffee);
  --diagram-ink: #fff;
}

.diagram-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.diagram-toolbar button {
  background: var(--company-majority);
  color: #fff;
  padding: .35rem .65rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: .2rem;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
}

.diagram-toolbar button:hover,
.diagram-toolbar button:focus-visible {
  color: #fff;
  outline: 2px solid var(--diagram-ink);
}

.diagram-toolbar output {
  margin-left: auto;
  font-size: .75rem;
}

.diagram-viewport {
  height: min(70vh, 720px);
  min-height: 360px;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
}

.diagram-viewport:active {
  cursor: grabbing;
}

.diagram-scene {
  width: max-content;
  transform-origin: 0 0;
}

.diagram-scene .mermaid {
  margin: 0;
}

.diagram-scene svg {
  display: block;
  max-width: none !important;
}

.diagram-scene .node rect,
.diagram-scene .node polygon {
  fill: var(--company-majority-beige) !important;
  stroke: var(--company-majority-dusty) !important;
  stroke-width: 1.5px !important;
}

.diagram-scene .node.flow-processing rect { fill: var(--company-majority-turquoise) !important; }
.diagram-scene .node.flow-storage rect { fill: var(--company-majority-light-purple) !important; }
.diagram-scene .node.flow-function rect { fill: var(--company-majority-pink) !important; }
.diagram-scene .node.flow-messaging rect { fill: var(--company-majority-acid-green) !important; }
.diagram-scene .node.flow-destination rect { fill: var(--company-majority-coffee) !important; }
.diagram-scene .node.flow-reliability rect { fill: var(--company-majority-yellow) !important; }

.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1rem 0;
}

.diagram-legend span {
  padding: .3rem .6rem;
  border-radius: .2rem;
  font-size: .7rem;
  color: var(--company-majority-midnight);
  background: var(--company-majority-beige);
}

.diagram-legend .flow-processing { background: var(--company-majority-turquoise); }
.diagram-legend .flow-storage { background: var(--company-majority-light-purple); }
.diagram-legend .flow-function { background: var(--company-majority-pink); }
.diagram-legend .flow-messaging { background: var(--company-majority-acid-green); }
.diagram-legend .flow-destination { background: var(--company-majority-coffee); }
.diagram-legend .flow-reliability { background: var(--company-majority-yellow); }

.diagram-scene .nodeLabel {
  color: var(--company-majority-midnight) !important;
}

.diagram-scene .cluster rect {
  fill: var(--diagram-background) !important;
  stroke: var(--diagram-line) !important;
}

.diagram-scene .edgeLabel,
.diagram-scene .cluster-label span {
  color: var(--diagram-ink) !important;
}

.diagram-scene .edgeLabel,
.diagram-scene .edgeLabel p,
.diagram-scene .labelBkg {
  background: var(--diagram-background) !important;
}

.diagram-scene .flowchart-link {
  stroke: var(--diagram-line) !important;
}

.diagram-scene marker path {
  fill: var(--diagram-line) !important;
}

.diagram-viewer:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
}

.diagram-viewer:fullscreen .diagram-viewport {
  flex: 1;
  height: auto;
}