{
    "views - aoe - stem": SimpleButton (
        start_enabled: false,
        within: "views - aoe",
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: -140),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0.5, px: -20),
                    dist: (frac: 0, px: 40),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),
    "views - aoe - back": SimpleButton (
        // Invisible, just defines area to contain the AutoStacker,
        // and to control visibility of all inner items.
        start_enabled: false,
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: -190),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 130),
                    dist: (frac: 0, px: 120),
                )
            ),
        ),
    ),
    "views - aoe - stacker": AutoStacker (
        within: "views - aoe - back",
        behavior: FillUpToScreenThenExtendDownWithInterval,
    ),
    "views - aoe - pollution": SimpleButton (
        within: "views - aoe - pollution - category back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -70),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/waste-water.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),
        ),
    ),
    "views - aoe - pollution - category back": SimpleButton (
        within: "views - aoe - stacker",
        ordering: 1,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 120),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),
    "views - aoe - fire safety": SimpleButton (
        within: "views - aoe - fire safety - category back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -70),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/fire-hazard.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),
        ),
    ),
    "views - aoe - fire safety - category back": SimpleButton (
        within: "views - aoe - stacker",
        ordering: 2,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 120),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),
    "views - aoe - health": SimpleButton (
        within: "views - aoe - health - category back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -70),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/steth.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),
        ),
    ),
    "views - aoe - health - category back": SimpleButton (
        within: "views - aoe - stacker",
        ordering: 3,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 120),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),
    "views - aoe - crime safety": SimpleButton (
        within: "views - aoe - crime safety - category back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -70),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/crime-safety-icon.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),
        ),
    ),
    "views - aoe - crime safety - category back": SimpleButton (
        within: "views - aoe - stacker",
        ordering: 4,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 120),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),
    "views - aoe - education": SimpleButton (
        within: "views - aoe - education - category back",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -70),
                    dist: (frac: 0, px: 100),
                ),
                y_axis: (
                    from: (frac: 0, px: 10),
                    dist: (frac: 0, px: 100),
                )
            ),
            image_path: "ui/icons/edu.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),
        ),
    ),
    "views - aoe - education - category back": SimpleButton (
        within: "views - aoe - stacker",
        ordering: 5,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 120),
                )
            ),
            fill_color: (191,159,23,191),
        ),
    ),



    // TOOLTIPS

    "views - aoe - pollution - tooltip": SimpleButton (
        within: "views - aoe - pollution",
        tooltip_of: "views - aoe - pollution",
        text: "Pollution Level",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -420),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "views - aoe - fire safety - tooltip": SimpleButton (
        within: "views - aoe - fire safety",
        tooltip_of: "views - aoe - fire safety",
        text: "Fire Safety Level",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -420),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "views - aoe - health - tooltip": SimpleButton (
        within: "views - aoe - health",
        tooltip_of: "views - aoe - health",
        text: "Healthcare Level",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -420),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "views - aoe - crime safety - tooltip": SimpleButton (
        within: "views - aoe - crime safety",
        tooltip_of: "views - aoe - crime safety",
        text: "Crime Safety Level",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -420),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
    "views - aoe - education - tooltip": SimpleButton (
        within: "views - aoe - education",
        tooltip_of: "views - aoe - education",
        text: "Education Level",
        text_color: (0,0,0,0xFF),
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -420),
                    dist: (frac: 0, px: 400),
                ),
                y_axis: (
                    from: (frac: 0, px: 20),
                    dist: (frac: 1, px: -40),
                )
            ),
            fill_color: (0xBF,0xBF,0xBF,0xBF),
        ),
    ),
}
