const { Window, Box, EventBox, Label } = Widget
const hovered1 = "background-color: red"
const hovered2 = "background-color: blue"
const nonhovered = "background-color: transparent"

const _with = Box({
  css: "margin: 10px;",
  child: EventBox({
    on_hover: self => self.css = hovered1,
    on_hover_lost: self => self.css = nonhovered,
    child: Box({
      css: "padding: 20px;",
      child: EventBox({
        on_hover: self => self.css = hovered2,
        on_hover_lost: self => self.css = nonhovered,
        child: Box({
          css: "padding: 20px;",
          child: Label("with")
        })
      })
    })
  })
})

const _without = Box({
  css: "margin: 10px;",
  child: EventBox({
    setup: self => self
      .on('leave-notify-event', () => self.css = hovered1)
      .on('enter-notify-event', () => self.css = nonhovered),
    child: Box({
      css: "padding: 20px;",
      child: EventBox({
        setup: self => self
          .on('leave-notify-event', () => self.css = hovered2)
          .on('enter-notify-event', () => self.css = nonhovered),
        child: Box({
          css: "padding: 20px;",
          child: Label("without")
        })
      })
    })
  })
})

Window({
  child: Box([_with, _without])
})