<%= graph font_size: 20 %>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@scroll_bar_background_width, @scroll_bar_background_height, @radius},
    id: :scroll_bar_slider_background,
    fill: @opts[:theme].border,
    stroke: {@opts[:border], @opts[:theme].background},
    translate: @scroll_bar_background_pos,
    input: [:cursor_button]
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@scroll_bar_drag_control_width, @scroll_bar_drag_control_height, @radius},
    id: :scroll_bar_slider_drag_control,
    translate: @scroll_bar_drag_control_pos,
    fill: @opts[:theme].background,
    input: [:cursor_button]
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@scroll_button_1_width, @scroll_button_1_height, @radius},
    id: :scroll_button_1,
    hidden: not @opts[:show_buttons],
    translate: @scroll_button_1_pos,
    fill: @opts[:theme].background,
    input: [:cursor_button]
%>
<%= component FloUI.Icon,
    {:flo_ui, "icons/arrow_drop_down_white.png"},
    hidden: not @opts[:show_buttons],
    translate: @scroll_button_1_icon_pos,
    pin: {48 / 2, 48 / 2},
    rotate: @scroll_button_1_icon_rotation
%>
<%= primitive Scenic.Primitive.RoundedRectangle,
    {@scroll_button_2_width, @scroll_button_2_height, @radius},
    id: :scroll_button_2,
    hidden: not @opts[:show_buttons],
    translate: @scroll_button_2_pos,
    fill: @opts[:theme].background,
    input: [:cursor_button]
%>
<%= component FloUI.Icon,
    {:flo_ui, "icons/arrow_drop_down_white.png"},
    hidden: not @opts[:show_buttons],
    translate: @scroll_button_2_icon_pos,
    pin: {48 / 2, 48 / 2},
    rotate: @scroll_button_2_icon_rotation
%>