# presentation/styles/diagram.style.css

> 64 lines of code and 0 definitions.

Tree: Site tree
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-styles-diagram-style-css
Source text: https://banes-lab.com/assets/sources/source.c8e1effe01f9a1d37ea424c8a03cca5c98f8bfdee24525a99d9099b10a21f57f.generated.txt

## Source

```css
.diagram-figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

.diagram-header {
    align-items: center;
    background: var(--accent-subtle);
    border-bottom: var(--border-s) solid var(--white-alpha-border);
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
}

.diagram-caption {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.diagram-canvas {
    flex: 1;
    max-height: var(--height-diagram-collapsed);
    min-height: var(--height-code-collapsed);
}

.diagram-canvas svg {
    display: block;
    height: auto;
    width: auto;
    zoom: var(--scale-diagram);
}

.diagram-missing {
    color: var(--accent-half);
    font-size: var(--font-sm);
    margin: 0;
}

.diagram-full {
    height: calc(var(--vh) * var(--overlay-panel-vh));
}

.diagram-full svg {
    display: block;
    height: auto;
    width: auto;
}

.diagram-source {
    display: none;
}

.diagram-walking .node,
.diagram-walking .flowchart-link {
    opacity: var(--opacity-low);
    transition: opacity var(--transition-slow);
}

.diagram-walking .node.walked,
.diagram-walking .flowchart-link.walked {
    opacity: var(--opacity-high);
}

@media (prefers-reduced-motion: reduce) {
    .diagram-walking .node,
    .diagram-walking .flowchart-link {
        opacity: var(--opacity-high);
        transition: none;
    }
}
```