(defwidget osdwidget []
  (box
    :class "osd-window"
    :orientation "h"
    :space-evenly false
    (revealer
      :reveal {osd_vol}
      :transition "slideright"
      :duration "80ms"
      (centerbox
        :class "osd-var"
        :orientation "h"
        :space-evenly false
        (circular-progress
          :value {volume.percent}
          :class "osd-circle"
          :thickness 4
          :start-at 75
          :halign "start"
          (button
            :class "inside-circle"
            (label :xalign "0.5" :yalign "0.5" :halign "center" :valign "center" :class "osd-incircle" :text "${volume.icon}")
          )
        )
        (box)
        (label :xalign 0.5 :halign "end" :class "osd-text" :text "${volume.percent}")
      )
    )
    (revealer
      :reveal {osd_bright}
      :transition "slideright"
      :duration "80ms"
      (centerbox
        :class "osd-var"
        :orientation "h"
        :space-evenly false
        (circular-progress
          :value {round(brightness.level, 0)}
          :class "osd-circle"
          :thickness 4
          :start-at 75
          :halign "start"
          (button
            :class "inside-circle"
            (label :xalign "0.5" :yalign "0.5" :halign "center" :valign "center" :class "osd-incircle-bright" :text "${brightness.icon}")
          )
        )
        (box)
        (label :xalign 0.5 :class "osd-text" :text {round(brightness.level, 0)})
      )
    )
  )
)

(defwindow osd
  :stacking "overlay"
  :wm-ignore true
  :monitor 0
  :namespace "osd"
  :geometry (geometry
    :y "69px"
    :width "100px"
    :height "53px"
    :anchor "top center"
  )
  :stacking "fg"
  :exclusive false
  (osdwidget)
)