
scroll_panel {
    clip_overflow = true,
    on_mouse_scroll = "ui.scroll#
        scroll_by(node, -evt.scroll_amount)
        return true
    ",
}

scroll_panel > content {
    width = parent_width - 32,
    height = parent_height,
}

scroll_panel > content(scroll_y=scroll_y) {
    scroll_y=scroll_y,
}

scroll_panel > scroll_bar {
    border_width = border_width(12.0),
    border = border_image("ui/blur_box", 6.0, 6.0,  false),
    x = parent_width - 32,
    y = 0,
    width = 32,
    height = parent_height,
    can_hover = true,
}

scroll_panel > scroll_bar > scroll_thumb {
    can_hover = true,
    image = "ui/scroll_button",
    x = 0,
    width = 32,
    height = 32,

    on_mouse_down = "ui.scroll#
        node.parent:focus()
        start_scroll(node.parent.parent, evt)
        return true
    ",
    on_mouse_move_over = "init#
        ui.set_cursor('base:ui/cursor/interact')
    ",
    on_mouse_move_out = "init#
        ui.set_cursor('base:ui/cursor/normal')
    ",
}

scroll_panel > scroll_bar > scroll_thumb(offset=y) {
    y = float(parent_height - 32) * y,
}

scroll_panel > scroll_bar > scroll_thumb(hover=true) {
    image = "ui/scroll_button_down",
}

scroll_catcher {
    width = parent_width,
    height = parent_height,

    can_hover = true,

    on_mouse_up = "ui.scroll#
        close_scroll()
        return true
    ",
    on_mouse_down = "ui.scroll#return true",
    on_mouse_move = "ui.scroll#
        warp_to(node:get_property_table('$scroll').scroll, evt)
        return true
    ",
    on_mouse_move_over = "ui.scroll#return true",
    on_mouse_move_out = "ui.scroll#return true",
    on_mouse_scroll = "ui.scroll#return true",
}