# presentation/styles/code.style.css

> 124 lines of code and 0 definitions.

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

## Source

```css
.code-block {
    background: var(--code-block);
    border: var(--border-s) solid var(--accent-subtle);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) 0;
    overflow: hidden;
    position: relative;
}

.code-header {
    align-items: center;
    background: var(--code-block);
    border-bottom: var(--border-s) solid var(--accent-subtle);
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-md);
}

.code-title {
    color: var(--banes-lab-accent);
    font-family: var(--font-family-mono);
    font-size: var(--font-xs);
}

.code-actions {
    align-items: center;
    display: flex;
    gap: var(--space-xs);
}

.code-copy {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--white-alpha-muted);
    cursor: pointer;
    display: flex;
    font-size: var(--font-sm);
    padding: var(--space-xs);
    transition: color var(--transition-fast) ease;
}

.code-copy:hover,
.code-copy.copied {
    color: var(--banes-lab-accent);
}

.code-expand,
.diagram-expand {
    align-items: center;
    background: var(--overlay-subtle);
    border: var(--border-s) solid var(--accent-subtle);
    border-radius: var(--radius-sm);
    color: var(--white-alpha-muted);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family-mono);
    font-size: var(--font-xs);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    transition: all var(--transition-fast) ease;
}

.code-expand:hover,
.diagram-expand:hover {
    background: var(--overlay-light);
    border-color: var(--banes-lab-accent);
    color: var(--banes-lab-accent);
}

.code-content {
    max-height: var(--height-code-collapsed);
}

.code-whole {
    overflow-x: auto;
}

.code-ref {
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent-dimmed);
    text-underline-offset: var(--space-xxs);
}

.code-ref:hover {
    color: var(--tab-accent);
    text-decoration-color: var(--tab-accent);
}

.code-content code,
.code-whole code,
.code-full code {
    color: var(--text-light-gray);
    display: block;
    font-family: var(--font-family-mono);
    font-size: var(--font-sm);
    line-height: var(--line-height-loose);
    padding: var(--space-md);
    white-space: pre;
}

.code-line.marked {
    background: var(--accent-subtle);
    border-radius: var(--radius-xs);
    outline: var(--border-s) solid var(--tab-accent);
    outline-offset: var(--space-xxs);
}

.syntax-keyword {
    color: var(--banes-lab-accent);
}

.syntax-type {
    color: var(--banes-lab-liquid);
}

.syntax-string {
    color: var(--banes-lab-pag);
}

.syntax-number {
    color: var(--accent-violet);
}

.syntax-constant {
    color: var(--white);
}

.syntax-comment {
    color: var(--white-alpha-muted);
    font-style: italic;
}

.syntax-heading {
    color: var(--banes-lab-accent);
    font-weight: var(--font-weight-semibold);
}

.code-full {
    background: var(--code-block);
    height: calc(var(--vh) * var(--overlay-panel-vh));
    margin: 0;
}
```