#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;
      object-fit: contain;
    }

    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: 95dvw;
        height: 95dvh;
        max-width: 95dvw;
        max-height: 95dvh;
      }

    }

    &: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;
    }

    image-alt-group {
      position: relative;
      display: inline-block;

      .alt-text {
        visibility: hidden;
        opacity: 0;
        background-color: var(--color-bg-alt-text);
        padding: 10px;
        margin: 10px;
        top: 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;

        transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;

        box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
      }

      &:hover .alt-text {
        visibility: visible;
        opacity: 1;
        transition: opacity 250ms ease-in 1s, visibility 0ms ease-in 1s;
      }
    }

  }
  ```
  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",)
      )
      chtml.image-alt-group({
        img
        html.span(class: ("alt-text",), img.alt)
      })
    })
    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
}