/* Wrapper */
.gallery-lightbox-wrapper {
  --_padding: 3rem;
  --_overlay-color: rgba(0, 0, 0, 0.4);
  --_animation-speed: 0.4s;
  --_image-starting-scale: 0.7;
  --_navigation-stroke-color: white;
  --_navigation-height: 30px;
  --_navigation-width: 18px;

  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--_animation-speed);
}

.gallery-lightbox-wrapper[data-is-open="true"] {
  opacity: 1;
  pointer-events: all;
}

/* Overlay */
.gallery-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: var(--_overlay-color);
  z-index: 1;
}

/* Lightbox Images */
.gallery-lightbox-image {
  position: absolute;
  inset: 50% 50%;
  translate: -50% -50%;
  max-width: calc(100vw - var(--_padding) * 2);
  max-height: calc(100vh - var(--_padding) * 2);
  scale: var(--_image-starting-scale);
  transition: scale var(--_animation-speed);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.gallery-lightbox-image[data-is-selected="true"] {
  z-index: 3;
  opacity: 1;
  pointer-events: all;
}
.gallery-lightbox-wrapper[data-is-open="false"] * {
  pointer-events: none;
}
.gallery-lightbox-wrapper[data-is-open="true"] .gallery-lightbox-image {
  scale: 1;
}

/* Next, Previous & Close Buttons */
.gallery-lightbox-next,
.gallery-lightbox-previous,
.gallery-lightbox-close {
  position: absolute;
  top: 50%;
  z-index: 2;
  height: var(--_navigation-height);
  width: var(--_navigation-width);
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 4;
  padding: 0;
  background-color: transparent;
  border: none;
  transition: opacity 0.3s;
}
:is(
    .gallery-lightbox-next,
    .gallery-lightbox-previous,
    .gallery-lightbox-close
  )
  svg {
  width: 100%;
  height: 100%;
}
:is(
    .gallery-lightbox-next,
    .gallery-lightbox-previous,
    .gallery-lightbox-close
  )
  path {
  stroke: var(--_navigation-stroke-color);
}
:is(
    .gallery-lightbox-next,
    .gallery-lightbox-previous,
    .gallery-lightbox-close
  ):hover {
  opacity: 0.7;
}
.gallery-lightbox-next {
  right: calc(var(--_padding) / 2 - var(--_navigation-width) / 2);
}
.gallery-lightbox-previous {
  left: calc(var(--_padding) / 2 - var(--_navigation-width) / 2);
  rotate: 180deg;
}
.gallery-lightbox-close {
  height: var(--_navigation-width);
  top: calc(var(--_padding) - var(--_navigation-width));
  right: calc(var(--_padding) - var(--_navigation-width));
}