#let callout(body, kind: none, label: none, outlined: false) = {
  html.section(
    class: ("callout", kind),
    context {
      let level = counter(heading).get().len() + 1
      heading(label + ":", level: level, numbering: none, outlined: outlined)
      body
    },
  )
}

#let tip = callout.with(kind: "tip", label: "Tip")
#let warn = callout.with(kind: "warn", label: "Warning")
#let note = callout.with(kind: "note", label: "Note")

#let todo(label, ..args) = {
  // callout(args.pos().join(), kind: "todo", label: "[TODO] " + label, outlined: true)
}

#let example(body) = todo("example", body)
#let solution(body) = todo("solution", body)

#let details(body, label: none) = {
  todo(label, body)
  // html.details({
  //   if label != none {
  //     html.summary(label)
  //   }
  //   body
  // })
}

#let camera() = {
  let attrs = (:)
  if orbit != auto { attrs.insert("orbit", if orbit == true { "" } else { "false" }) }
  if pan != auto { attrs.insert("pan", if pan == true { "" } else { "false" }) }
  if zoom != auto { attrs.insert("zoom", if zoom == true { "" } else { "false" }) }
  html.elem("mc-camera", attrs: attrs)
}

#let diorama(
  body,
  theta: auto,
  phi: auto,
  radius: auto,
  speed: auto,
  orbit: auto,
  pan: auto,
  zoom: auto,
  timeline: auto,
  autoplay: auto,
  loop: auto,
  subticks: auto,
) = {
  let attrs = (:)
  if theta != auto { attrs.insert("theta", str(theta)) }
  if phi != auto { attrs.insert("phi", str(phi)) }
  if radius != auto { attrs.insert("radius", str(radius)) }
  if speed != auto { attrs.insert("speed", str(speed)) }
  if orbit != auto { attrs.insert("orbit", if (orbit) { "" } else { "false" }) }
  if pan != auto { attrs.insert("pan", if (pan) { "" } else { "false" }) }
  if zoom != auto { attrs.insert("zoom", if (zoom) { "" } else { "false" }) }
  if timeline != auto { attrs.insert("timeline", if (timeline) { "" } else { "false" }) }
  if autoplay != auto { attrs.insert("autoplay", if (autoplay) { "" } else { "false" }) }
  if loop != auto { attrs.insert("loop", if (loop) { "" } else { "false" }) }
  if subticks != auto { attrs.insert("subticks", if (subticks) { "" } else { "false" }) }
  html.elem("mc-diorama", html.script(body, type: "text/mc-world"), attrs: attrs)
}