# presentation/styles/walk.style.css

> 112 lines of code and 0 definitions.

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

## Source

```css
.walk-steps {
    color: var(--white-alpha-muted);
    font-family: var(--font-family-heading);
    font-size: var(--font-xs);
}

.walk-status {
    border-top: var(--border-s) solid var(--white-alpha-border);
    color: var(--text-light-gray);
    flex: none;
    font-family: var(--font-family-mono);
    font-size: var(--font-xs);
    margin: 0;
    min-height: calc(2lh + var(--space-xs) * 2);
    overflow-wrap: anywhere;
    padding: var(--space-xs) var(--space-md);
}

.hex {
    fill-opacity: var(--hex-opacity);
    stroke: var(--hex-stroke);
    stroke-width: var(--hex-stroke-width);
}

.hex-trail {
    stroke: var(--hex-bright);
    stroke-opacity: 0;
    stroke-width: var(--hex-current-width);
    transition:
        fill var(--ghost-decay) var(--easing-hold),
        fill-opacity var(--ghost-decay) var(--easing-hold),
        stroke-opacity var(--ghost-decay) var(--easing-hold);
}

.hex-ghost {
    fill: var(--hex-bright);
    fill-opacity: 1;
    stroke: var(--hex-bright);
    stroke-opacity: 1;
    stroke-width: var(--hex-current-width);
}

.hex-declare {
    --hex-bright: var(--hex-declare-bright);

    fill: var(--hex-declare);
}

.hex-call {
    --hex-bright: var(--hex-call-bright);

    fill: var(--hex-call);
}

.hex-write {
    --hex-bright: var(--hex-write-bright);

    fill: var(--hex-write);
}

.hex-read {
    --hex-bright: var(--hex-read-bright);

    fill: var(--hex-read);
}

.hex-control {
    --hex-bright: var(--hex-control-bright);

    fill: var(--hex-control);
}

.hex-structure {
    --hex-bright: var(--hex-structure-bright);

    fill: var(--hex-structure);
}

.hex.hex-current {
    animation: hex-pulse var(--animate-fade) ease-in-out infinite alternate;
    fill: var(--white);
    fill-opacity: 1;
    stroke: var(--tab-accent);
    stroke-width: var(--hex-current-width);
}

.hex-flagged-high {
    stroke: var(--hex-flag-high);
    stroke-width: var(--hex-flag-width);
}

.hex-flagged-medium {
    stroke: var(--hex-flag-medium);
    stroke-width: var(--hex-flag-width);
}

.hex-flagged-low {
    stroke: var(--hex-flag-low);
    stroke-width: var(--hex-flag-width);
}

.hex-warn-high {
    fill: var(--hex-flag-high);
}

.hex-warn-medium {
    fill: var(--hex-flag-medium);
}

.hex-warn-low {
    fill: var(--hex-flag-low);
}

.hex-warn-text {
    fill: var(--hex-stroke);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
}

.hex-path {
    fill: none;
    stroke: var(--hex-path);
    stroke-width: var(--hex-path-width);
}

.hex-arrow {
    fill: var(--hex-arrow);
}

.hex-empty {
    fill: var(--text-light-gray);
    font-family: var(--font-family-mono);
    font-size: var(--font-regular);
}

.source-holder {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
```