(defwidget bright_osd_widget []
  (eventbox
    :halign "start"
    :onscroll "echo $(echo {} | sed -e 's/down/-U 3/g' -e 's/up/-A 3/g' | xargs light) && scripts/brightness osd &"
    :onmiddleclick "playerctl play-pause"
    :onrightclick "playerctl next || playerctl position `bc <<< \"100 * $(playerctl metadata mpris:length) / 1000000 / 100\"`"
    :onclick "${open_sideleft ?
    (EWW_CMD + ' update bar_offset=0 && ' + EWW_CMD + ' update open_sideleft=false &') :
    (EWW_CMD + ' open sideleft && ' + EWW_CMD + ' update bar_offset=1 && ' + EWW_CMD + ' update open_sideright=false && ' + EWW_CMD + ' update open_sideleft=true &')}"
    (box
      :class "osd-pad"
      :width 390
      (box
        :space-evenly false
        :halign "start"
        :class "osd-bg"
        :style "
        ${osd_bright ? 'transition: 150ms cubic-bezier(0.05, 0.7, 0.1, 1);' : 'transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);'}
        ${osd_bright ? '' : 'margin-left: -200px; margin-right: 200px;'}
        "
        (circular-progress
          :value {brightness.level > 100 ? 100 : round(brightness.level, 0)}
          :class "osd-circle"
          :thickness 3
          :start-at 75
          (button
            :class "inside-circle"
            (label :class "bar-txt-smaller bar-txt-norm"
              :text {round(brightness.level, 0) == 100 ? '' : round(brightness.level, 0)}
            )
          )
        )
        (label :xalign 1 :hexpand true
          :class "bar-txt bar-txt-norm"
          :style "margin-right: 5px;"
          :text "Brightness"
        )
      )
    )
  )
)