#import "custom_html.typ" as chtml

#let fullscreen-counter = state("fullscreen-counter", 0)

#let show-rule-img-fig(img) = context {
  let fs-id = fullscreen-counter.get()
  ```raw-css
  figure image-magnifier-group {

    img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
    }

    fullscreen-overlay {
      display: none;

      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      position: fixed;

      background: var(--color-bg-overlay);

      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 100%;
      }

    }

    &:has(.img-magnified-button:checked) {
      fullscreen-overlay {
        display: flex;
      }
    }

    input {
      /* To allow screen reader to still access these. */
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }

  }
  ```
  chtml.image-magnifier-group({
    html.label({
      html.input(
        type: "radio", 
        name: "magnify-img-" + str(fs-id), 
        id: "img-" + str(fs-id) + "-magnified-button", 
        class: ("img-magnified-button",)
      )
      img
    })
    html.label({
      html.input(
        type: "radio", 
        name: "magnify-img-" + str(fs-id), 
        id: "img-" + str(fs-id) + "-not-magnified-button", 
        class: ("img-not-magnified-button",),
        checked: true
      )
      chtml.fullscreen-overlay()[
        #img
      ]
    })
  })
  fullscreen-counter.update(x => x+1)
}

#let show-rule-figure(fig) = {
  show image: show-rule-img-fig
  ```raw-css
  figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  ```
  fig
}