:root {
  --galaz-diagram-bg: #f8fafc;
  --galaz-diagram-grid: rgba(30, 41, 59, 0.18);
  --galaz-diagram-border: rgba(30, 41, 59, 0.20);

  --galaz-diagram-foot: #b85c10;
  --galaz-diagram-red: #d71920;
  --galaz-diagram-blue: #2563eb;
  --galaz-diagram-green: #3f7d20;
}

[data-md-color-scheme="slate"] {
  --galaz-diagram-bg: #0b0f14;
  --galaz-diagram-grid: rgba(203, 213, 225, 0.35);
  --galaz-diagram-border: rgba(203, 213, 225, 0.25);

  --galaz-diagram-foot: #c66a1a;
  --galaz-diagram-red: #ff3b30;
  --galaz-diagram-blue: #60a5fa;
  --galaz-diagram-green: #7cb342;
}

.galaz-technical-diagram {
  background-color: var(--galaz-diagram-bg);
  background-image:
    linear-gradient(var(--galaz-diagram-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--galaz-diagram-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid var(--galaz-diagram-border);
  border-radius: 12px;
  padding: 1rem;
  margin: 1.5rem 0;
}

.galaz-technical-diagram img {
  display: block;
  width: 100%;
  height: auto;
}