export component OSDpopup inherits Window {
    in property <int> popup_width: 200;
    in property <int> popup_height: 50;
    in property <int> popup_border_radius: 5;
    in property <int> popup_padding: 7;

    in property <color> osd_bg_color: #5f5f5f67;
    in property <color> fill_color: #127a9bff;

    in property <int> value_font_size: 35;
    in property <color> value_font_color: #ffffffff;
    in property <string> value_font: "Iosevka Extrabold";
    in property <int> percent_value: 0;

    in property <int> icon_size: self.value_font_size;
    in property <color> icon_font_color: self.value_font_color;
    in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono";
    in property <string> icon_glyph: "";

    no-frame: true;
    always-on-top: true;
    background: transparent;
    width: popup_width *1px;
    height: popup_height *1px;

    // Background
    osd_bg:= Rectangle {
        height: 100%;
        width: 100%;
        y: 0;
        border-width: 0px;
        border-radius: popup_border_radius *1px;
        background: osd_bg_color;
    }
    
    // 
    osd_fill:= Rectangle {
        height: 100%;
        width: (popup_width/100) * percent_value *1px;
        y: 0;
        x: 0;
        border-width: 0px;
        border-top-left-radius: popup_border_radius *1px;
        border-bottom-left-radius: self.border-top-left-radius;
        border-top-right-radius:
            self.width > osd_bg.width - popup_border_radius * 1px
                ? popup_border_radius *1px
                : 0px;
        border-bottom-right-radius: self.border-top-right-radius;
        background: fill_color;
    }
    
    HorizontalLayout {
        padding-left: popup_padding *1px;
        padding-right: popup_padding *1px;
        
        // Icon: Volume, Brightness, Battery, etc.
        icon_symbol:= Rectangle {
            //background: #a0c932;  // For testing
            Text {
                width: 100%;
                height: 100%;
                text: icon_glyph;
                vertical-alignment: center;
                horizontal-alignment: left;
                font-family: icon_font;
                color: icon_font_color;
                font-size: icon_size *1px;
            }
        }

        // Percentage value
        value_text:= Rectangle {
            //background: #309968;  // For testing
            Text {
                width: 100%;
                height: 100%;
                text: percent_value + "%";
                vertical-alignment: center;
                horizontal-alignment: right;
                font-family: value_font;
                color: value_font_color;
                font-size: value_font_size *1px;
            }
        }
    }
}