.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:
    calc(var(--lightbox-padding) + var(--custom-safe-inset-top, 0px))
    calc(var(--lightbox-padding) + var(--custom-safe-inset-right, 0px))
    calc(var(--lightbox-padding) + var(--custom-safe-inset-bottom, 0px))
    calc(var(--lightbox-padding) + var(--custom-safe-inset-left, 0px));
  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 {
    align-items: center;
    display: flex;
    justify-content: center;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }

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

.lightbox__actions {
  display: flex;
  gap: 1ch;
  inset:
    calc(var(--lightbox-padding) + var(--custom-safe-inset-top, 0px))
    calc(var(--lightbox-padding) + var(--custom-safe-inset-right, 0px))
    auto
    auto;
  position: absolute;
}

.lightbox__close {
  align-items: center;
  appearance: none;
  background: oklch(1 0 0);
  border: 1px solid oklch(var(--lch-ink-lightest));
  border-radius: 999px;
  box-shadow: 0 0.35rem 1rem oklch(var(--lch-black) / 0.12);
  color: oklch(var(--lch-ink-darkest));
  cursor: pointer;
  display: inline-flex;
  height: 2.85rem;
  justify-content: center;
  padding: 0;
  width: 2.85rem;
}

.lightbox__close-icon {
  -webkit-touch-callout: none;
  background-color: currentColor;
  block-size: 1rem;
  display: inline-block;
  inline-size: 1rem;
  mask-image: url("/assets/remove-d18dd986.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 1rem;
  pointer-events: none;
  user-select: none;
}

.lightbox__figure {
  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__image {
  flex: 1;
  min-block-size: 0;
}

@media(hover: hover) {
  .lightbox__close {
    transition: transform var(--transition), box-shadow var(--transition);
  }

  .lightbox__close:hover,
  .lightbox__close:focus-visible {
    box-shadow: 0 0.5rem 1.15rem oklch(var(--lch-black) / 0.16);
    transform: translateY(-1px);
  }

  .lightbox__close:active {
    transform: translateY(0);
  }
}

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