@layer components {
  .lightbox {
    --dialog-duration: 350ms;
    --lightbox-padding: 3vmin;

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

    &::backdrop {
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      background-color: oklch(var(--lch-black) / 50%);
    }

    /* Closed state */
    &,
    &::backdrop {
      opacity: 0;
      transition: var(--dialog-duration) allow-discrete;
      transition-property: display, opacity, overlay;
    }

    /* Open state */
    &[open],
    &[open]::backdrop {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }

      .lightbox__figure {
        animation: slide-up var(--dialog-duration);
      }
    }
  }

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

  .lightbox__figure {
    align-self: stretch;
    animation-fill-mode: forwards;
    animation: slide-down var(--dialog-duration);
    display: flex;
    flex-direction: column;
    gap: var(--lightbox-padding);
    margin: 0 auto;
    max-block-size: 100%;

    img {
      object-fit: contain;
    }
  }

  .lightbox__caption {
    color: var(--color-ink-inverted);

    &:empty {
      display: none;
    }
  }

  .lightbox__image {
    flex: 1;
    min-block-size: 0;
  }

  /* Prevent body from scrolling when lightbox is open */
  html:has(.lightbox[open]) {
    overflow: clip;
  }
}