/* Full-screen image viewer for embedded comment images. Simplified from Fizzy to HogPoint tokens. */
@layer components {
  .lightbox {
    --lightbox-padding: 3vmin;

    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: 100dvw;
    block-size: 100dvh;
    max-inline-size: unset;
    max-block-size: unset;
    border: 0;
    padding: var(--lightbox-padding);
    background-color: transparent;
    overflow: hidden;
    text-align: center;

    &::backdrop {
      backdrop-filter: blur(16px);
      background-color: rgb(0 0 0 / 55%);
    }

    &[open] {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lightbox-padding);
    margin: auto;
    min-block-size: 0;
    max-block-size: 100%;
  }

  /* Pinch-zoom viewport: clips the transform and owns the gestures (the app's user-scalable=no
     viewport disables native pinch). Shrink-wraps the image at fit so the pan-clamp math — which
     measures the <img>'s box, not its rendered contents — stays exact (no letterbox slack). */
  .lightbox__viewport {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 0.2em;
    min-block-size: 0;
    cursor: zoom-in;
    touch-action: none;
    user-select: none;
  }

  .lightbox__viewport[data-pinch-zoom-zoomed] {
    cursor: grab;
  }

  .lightbox__image {
    display: block;
    max-inline-size: calc(100dvw - 2 * var(--lightbox-padding));
    max-block-size: calc(100dvh - 4 * var(--lightbox-padding));
    transform-origin: 0 0;
    will-change: transform;
    -webkit-user-drag: none;
  }

  .lightbox__caption {
    color: white;

    &:empty {
      display: none;
    }
  }

  .lightbox__actions {
    position: absolute;
    inset-block-start: var(--lightbox-padding);
    inset-inline-end: var(--lightbox-padding);
    display: flex;
    gap: 1ch;
  }

  /* Prevent the page scrolling while the lightbox is open. */
  html:has(.lightbox[open]) {
    overflow: clip;
  }
}