{
    "controls - scroll direction - label": SimpleButton (
        within: "controls - panel",
        text: "Vertical Scrolling Direction",
        text_align: left,
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                ),
                y_axis: (
                    from: (frac: 0, px: 120),
                    dist: (frac: 0, px: 40),
                )
            ),
        )
    ),
    "controls - scroll direction - value": SimpleButton (
        within: "controls - scroll direction - label",
        default: (
            area: (
                x_axis: (
                    from: (frac: 1, px: -300),
                    dist: (frac: 0, px: 300),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 0, px: 40),
                )
            ),
            fill_color: (95,95,95,255),
            border_color: (159,159,159,255),
        ),
        while_hovered: (
            fill_color: (127,127,127,255),
        )
    ),
    "controls - scroll direction - dropdown": SimpleButton (
        start_enabled: false,
        z: 30,
        within: "controls - scroll direction - value",
    ),
    "controls - scroll direction - cancel": SimpleButton (
        within: "controls - scroll direction - dropdown",
        default: (
            area: (
                x_axis: (
                    from: (frac: -1000, px: 0),
                    dist: (frac: 3000, px: 0),
                ),
                y_axis: (
                    from: (frac: -1000, px: 0),
                    dist: (frac: 3000, px: 0),
                )
            ),
        )
    ),
    "controls - scroll direction - dropdown border": SimpleButton (
        within: "controls - scroll direction - dropdown",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: -1),
                    dist: (frac: 1, px: 2),
                ),
                y_axis: (
                    from: (frac: 0, px: -1),
                    dist: (frac: 2, px: 2),
                )
            ),
            fill_color: (223,223,31,255),
        )
    ),
    "controls - scroll direction - Default": SimpleButton (
        z: 30,
        text: "Default",
        within: "controls - scroll direction - dropdown",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                ),
                y_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                )
            ),
            fill_color: (95,95,95,255),
        ),
        while_hovered: (
            fill_color: (127,127,127,255),
        )
    ),
    "controls - scroll direction - Inverted": SimpleButton (
        z: 30,
        text: "Inverted",
        within: "controls - scroll direction - dropdown",
        default: (
            area: (
                x_axis: (
                    from: (frac: 0, px: 0),
                    dist: (frac: 1, px: 0),
                ),
                y_axis: (
                    from: (frac: 1, px: 0),
                    dist: (frac: 1, px: 0),
                )
            ),
            fill_color: (95,95,95,255),
        ),
        while_hovered: (
            fill_color: (127,127,127,255),
        )
    ),
}
