.lightbox {
  --dialog-duration: 350ms;
  --lightbox-padding: 3vmin;
  --lightbox-max-inline-size:
    calc(
      100dvw
      - (2 * var(--lightbox-padding))
      - var(--custom-safe-inset-left, 0px)
      - var(--custom-safe-inset-right, 0px)
    );
  --lightbox-max-block-size:
    calc(
      100dvh
      - (2 * var(--lightbox-padding))
      - var(--custom-safe-inset-top, 0px)
      - var(--custom-safe-inset-bottom, 0px)
    );

  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 {
  align-items: center;
  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;
  z-index: 4;
}

.lightbox__photo-link {
  align-items: center;
  background-color: var(--color-blue, oklch(var(--lch-blue-dark)));
  block-size: 3.15rem;
  border: 0;
  border-radius: 2.2125em;
  box-shadow: var(--box-shadow-pill, 0 0.35rem 1.1rem rgba(0, 0, 0, 0.22));
  color: var(--color-white, white);
  display: inline-flex;
  font-family: var(--font-family-cartridge, sans-serif);
  font-feature-settings: normal;
  font-size: var(--font-size-xxx-small, 0.9rem);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.025em;
  line-height: 1.05em;
  padding: 0 1rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.lightbox__photo-link span {
  margin-bottom: -0.1625em;
  margin-top: -0.1875em;
}

.lightbox__photo-link[hidden] {
  display: none;
}

@media(hover: hover) {
  .lightbox__photo-link {
    transition:
      background var(--transition, 0.125s ease),
      box-shadow var(--transition, 0.125s ease),
      color var(--transition, 0.125s ease),
      transform var(--transition, 0.125s ease)
    ;
  }

  .lightbox__photo-link:focus,
  .lightbox__photo-link:hover {
    background-color: var(--color-blue-hover, oklch(var(--lch-blue-hover)));
    color: var(--color-white, white);
  }

  .lightbox__photo-link:active {
    transform: scale(0.98) translateY(0.0125em);
  }
}

.lightbox .btn.fill-white {
  --btn-size: 3.15rem;
  --icon-size: 2.35rem;

  align-items: center;
  aspect-ratio: 1;
  background-color: var(--color-ink-inverted, oklch(1 0 0));
  block-size: var(--btn-size);
  border: 1px solid var(--color-ink-light, oklch(84% 0.005 256));
  border-radius: 99rem;
  color: var(--color-ink, oklch(26% 0.05 264));
  cursor: pointer;
  display: grid;
  inline-size: var(--btn-size);
  justify-content: normal;
  padding: 0;
  place-items: center;
}

.lightbox .btn.fill-white > * {
  grid-area: 1/1;
}

.lightbox .icon {
  -webkit-touch-callout: none;
  background-color: currentColor;
  block-size: var(--icon-size, 1em);
  display: inline-block;
  flex-shrink: 0;
  height: var(--icon-size, 1em);
  inline-size: var(--icon-size, 1em);
  -webkit-mask-image: var(--svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--icon-size, 1em);
  mask-image: var(--svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--icon-size, 1em);
  pointer-events: none;
  user-select: none;
  width: var(--icon-size, 1em);
}

.lightbox .icon--remove {
  --svg: url("/assets/remove-d18dd986.svg");
}

.lightbox .for-screen-reader {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.lightbox__figure {
  animation-fill-mode: forwards;
  animation: slide-down var(--dialog-duration);
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-block-size: 100%;
  max-inline-size: 100%;
}

.lightbox__media {
  display: inline-block;
  line-height: 0;
  max-block-size: var(--lightbox-max-block-size);
  max-inline-size: var(--lightbox-max-inline-size);
  position: relative;

  &::before {
    background:
      linear-gradient(
        100deg,
        color-mix(in srgb, var(--color-ink-lightest, oklch(96% 0.002 252)) 58%, transparent) 0%,
        color-mix(in srgb, var(--color-canvas-light, white) 82%, transparent) 42%,
        color-mix(in srgb, var(--color-ink-lightest, oklch(96% 0.002 252)) 58%, transparent) 84%
      );
    background-size: 220% 100%;
    border-radius: 8px;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 160ms ease;
    z-index: 0;
  }

  &[data-lightbox-loading]::before {
    animation: lightbox-placeholder-sweep 1.2s ease-in-out infinite;
    opacity: 1;
  }

  img {
    object-fit: contain;
  }
}

.lightbox__media[data-lightbox-framed] {
  aspect-ratio: var(--lightbox-frame-width, 3) / var(--lightbox-frame-height, 4);
  inline-size:
    min(
      var(--lightbox-max-inline-size),
      calc(var(--lightbox-max-block-size) * var(--lightbox-frame-ratio, 0.75))
    );
}

.lightbox__image {
  block-size: auto;
  display: block;
  inline-size: auto;
  max-block-size: var(--lightbox-max-block-size);
  max-inline-size: var(--lightbox-max-inline-size);
  position: relative;
  z-index: 1;
}

.lightbox__media[data-lightbox-framed] .lightbox__image:not(.lightbox__image--before) {
  block-size: 100%;
  inline-size: 100%;
}

.lightbox__media[data-lightbox-loading] .lightbox__image:not(.lightbox__image--before) {
  opacity: 0;
}

.lightbox__media--stacked {
  --lightbox-before-gap: clamp(0.5rem, 2vmin, 1rem);
  --lightbox-before-size:
    min(
      calc(var(--lightbox-image-width, 100%) * 0.25),
      calc(var(--lightbox-image-height, 100%) * 0.25),
      120px
    );
  --lightbox-before-top-offset: clamp(2.5rem, 7vmin, 4rem);

  position: relative;
}

.lightbox__media--stacked .lightbox__image--before {
  border: clamp(2px, 0.5vmin, 4px) solid var(--color-canvas-light, white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--color-ink-lightest, oklch(96% 0.002 252)) 58%, transparent) 0%,
      color-mix(in srgb, var(--color-canvas-light, white) 82%, transparent) 42%,
      color-mix(in srgb, var(--color-ink-lightest, oklch(96% 0.002 252)) 58%, transparent) 84%
    );
  background-size: 220% 100%;
  height: var(--lightbox-before-size);
  left: calc(var(--lightbox-image-left, 0px) + var(--lightbox-before-gap));
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: calc(var(--lightbox-image-top, 0px) + var(--lightbox-before-top-offset));
  width: var(--lightbox-before-size);
  z-index: 2;
}

.lightbox__media[data-lightbox-loading] .lightbox__image--before:not([data-lightbox-loaded]) {
  animation: lightbox-placeholder-sweep 1.2s ease-in-out infinite;
}

.lightbox__before-after-arrow {
  color: oklch(0.86 0.24 145);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34));
  height: clamp(3.5rem, calc(var(--lightbox-image-height, 100%) * 0.14), 6.5rem);
  left:
    calc(
      var(--lightbox-image-left, 0px)
      + var(--lightbox-before-gap)
      + (var(--lightbox-before-size) * 0.74)
    );
  pointer-events: none;
  position: absolute;
  top:
    calc(
      var(--lightbox-image-top, 0px)
      + var(--lightbox-before-top-offset)
      + (var(--lightbox-before-size) * 0.38)
    );
  width: clamp(5rem, calc(var(--lightbox-image-width, 100%) * 0.24), 9.5rem);
  z-index: 3;
}

.lightbox__before-after-arrow-line,
.lightbox__before-after-arrow-shadow {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__before-after-arrow-shadow {
  stroke: oklch(var(--lch-black) / 0.5);
  stroke-width: 18;
}

.lightbox__before-after-arrow-line {
  stroke: currentColor;
  stroke-width: 11;
}

.lightbox .generated-badge {
  background: oklch(0.86 0.24 145);
  border-radius: 999px;
  color: oklch(var(--lch-black));
  font-size: clamp(0.6rem, 1.5vmin, 0.74rem);
  font-weight: 900;
  inset:
    calc(var(--lightbox-image-top, 0px) + clamp(0.55rem, 1.7vmin, 0.85rem))
    auto
    auto
    calc(var(--lightbox-image-left, 0px) + clamp(0.55rem, 1.7vmin, 0.85rem));
  letter-spacing: 0.09em;
  line-height: 1;
  padding: 0.42em 0.6em 0.46em;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  z-index: 1;
}

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

@keyframes lightbox-placeholder-sweep {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}