use makepad_widgets::*;

live_design! {
    import makepad_draw::shader::std::*;
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    import crate::shared::styles::*;
    import crate::shared::clickable_view::ClickableView

    CustomButton = <ClickableView> {
        width: Fill, height: Fit
        // flow: Right
        show_bg: false
        draw_bg: {
            // color: #EDEDED;
            color: #000;
        }

        button = <Button> {
            width: Fill, height: 34.
            text: "Welcome"
            draw_text: {
                text_style: <REGULAR_TEXT>{font_size: 12.},
                fn get_color(self) -> vec4 {
                    return #000
                }
            }
            draw_bg: {
                border_radius: 8.
                fn pixel(self) -> vec4 {
                    let border_color = #b4b4b4;
                    let border_width = 0.5;
                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                    let body = mix(mix(#f, #f0, self.hover), #d1, self.pressed);

                    sdf.box(
                        1.,
                        1.,
                        self.rect_size.x - 2.0,
                        self.rect_size.y - 2.0,
                        self.border_radius
                    )
                    sdf.fill_keep(body)

                    sdf.stroke(
                        border_color,
                        border_width
                    )
                    return sdf.result
                }
            }
        }
    }
}