flo_ui

<%= graph font_size: 20 %>

<%= primitive Scenic.Primitive.Rectangle,
    {10000, 10000},
    translate: {-5000, -5000},
    id: :clickout,
    input: [:cursor_button],
    hidden: true
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@button_width, @button_height, 3},
    id: :bg,
    stroke: {1, {@theme.border, 150}},
    fill: @theme.background,
    input: [:cursor_button]
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@button_width, @background_height, 3},
    id: :dropdown_bg,
    translate: {0, 45},
    hidden: true,
    stroke: {1, {@theme.border, 150}},
    fill: @theme.background
%>

<%= primitive Scenic.Primitive.Rectangle,
    {@button_width-2, 3},
    id: :border_cover,
    translate: {1, 44},
    hidden: true,
    fill: @theme.background
%>

<%= component FloUI.Scrollable.Container,
    %{
        frame: {@frame_width, @frame_height},
        content: {@frame_width, @content_height}
    },
    id: :scroll_container,
    translate: {1, 60},
    hidden: true,
    scroll_bars: %{
        vertical: @scroll_bar
    }
do %>
    <%= component FloUI.Dropdown.Items,
        {@items, @selected},
        theme: @theme
    %>
<% end %>

<%= primitive Scenic.Primitive.Text,
    @selected_label,
    id: :selected_label,
    fill: @theme.text,
    translate: {5, 30}
%>

<%= component FloUI.Icon,
    {:flo_ui, "icons/arrow_drop_down_white.png"},
    translate: {@button_width - 48 / 2 - 10, @button_height / 2 - 48 / 2},
    pin: {48 / 2, 48 / 2},
    id: :icon
%>