{
    "tools - icon": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 60),
                ),
                y_axis: (
                    from: (frac: 0, px: -60),
                    dist: (frac: 0, px: 60),
                )
            ),
            fill_color: (47,31,191,191),
            image_path: "ui/icons/build_tools.png",
        ),
    ),
    "tools - arrow expand": SimpleButton (
        within: "tools - back stub",
        start_enabled: false,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 20),
                )
            ),
            image_path: "ui/icons/tick-up.png",
        ),
    ),
    "tools - arrow minimize": SimpleButton (
        within: "tools - back stub",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 20),
                )
            ),
            image_path: "ui/icons/tick-down.png",
        ),
    ),
    "tools - back stub": SimpleButton (
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 1, px: -20),
                    dist: (frac: 0, px: 20),
                )
            ),
            fill_color: (47,31,191,191),
        ),
    ),
    "tools - back": SimpleButton (
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 1, px: -730),
                    dist: (frac: 0, px: 710),
                )
            ),
            fill_color: (47,31,191,191),
        ),
    ),
    "tools - transit": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 250),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "buildings/roads/road.straight.bldg.1.above.png$white_outline",
            fill_color: (0x3F,0x3F,0x3F,0xFF),
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),
    "tools - zones": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 130),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/zoning.png$white_outline",
            fill_color: (0x3F,0x3F,0x3F,0xFF),
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),
    "tools - utils": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 370),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/utils.png$white_outline",
            fill_color: (0x3F,0x3F,0x3F,0xFF),
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),
    "tools - civic": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 490),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "buildings/gov/fire-station.bldg.0.above.png$white_outline",
            fill_color: (0x3F,0x3F,0x3F,0xFF),
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),
    "tools - demolish": SimpleButton (
        within: "tools - back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 610),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "buildings/deletion.bldg.0.above.png$white_outline",
            fill_color: (0x3F,0x3F,0x3F,0xFF),
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),
    "tools - query": SimpleButton (
        within: "tools - back",
        //text: "?",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            fill_color: (0x3F,0x3F,0x3F,0xFF),
            image_path: "ui/icons/query.png$white_outline",
        ),
        while_active: (
            border_color: (0xFF,0xFF,0xFF,0xFF),
        ),
        while_hovered: (
            fill_color: (0x7F,0x7F,0x7F,0xFF),
        ),
    ),



    // TOOLTIPS 

    "tools - transit - tooltip": SimpleButton (
        within: "tools - transit",
        tooltip_of: "tools - transit",
        text: "Transit Infrastructure",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "tools - zones - tooltip": SimpleButton (
        within: "tools - zones",
        tooltip_of: "tools - zones",
        text: "Economic Development Zones",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "tools - utils - tooltip": SimpleButton (
        within: "tools - utils",
        tooltip_of: "tools - utils",
        text: "Utility Infrastructure",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "tools - civic - tooltip": SimpleButton (
        within: "tools - civic",
        tooltip_of: "tools - civic",
        text: "Civic Services",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "tools - demolish - tooltip": SimpleButton (
        within: "tools - demolish",
        tooltip_of: "tools - demolish",
        text: "Demolish Structures",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "tools - query - tooltip": SimpleButton (
        within: "tools - query",
        tooltip_of: "tools - query",
        text: "Inspect Tile Information",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: 20),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
}
