.photo-viewer {
  @apply h-full bg-black-pure;
  position: relative;
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 1;
  /** initialization animation **/
  will-change: opacity;
  opacity: 0;
  transition: opacity 200ms ease-in;
  transition-delay: 100ms;
}

.photo-viewer--initialized {
  opacity: 1;
}

.photo-viewer__swiper-container {
  @apply h-full;
}

.photo-viewer .photo-viewer__swiper-wrapper {
  @apply items-center;
}

/**
 * Allow browsers to optimize transform by informing it ahead of time.
 *
 * I've omitted adding this to .image (for zoom) because it felt worse...
 *
 * @reference https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
 */
.photo-viewer .photo-viewer__swiper-wrapper,
.photo-viewer .swiper-zoom-container {
  /** 
   * - .swiper-wrapper is transformed for the swiping gesture
   * - .swiper-zoom-container is transformed for parallax
   */
  will-change: transform;
}

.photo-viewer .photo-viewer__swiper-slide {
  /** remove overflow after zoom expands beyond slide **/
  overflow: hidden;
}

.photo-viewer__navigation-container {
  overflow: hidden;
}

.photo-viewer .photo-viewer__navigation {
  @apply shadow-md-filter;
  z-index: 2;
}

/** adjust swiper button styles **/
.photo-viewer .swiper-button-prev,
.photo-viewer .swiper-button-next {
  /** to vertically center svg after we shrink it **/
  display: flex;
  /** remove swipers provided background image **/
  background-image: unset;
}

.photo-viewer .photo-viewer__navigation--prev,
.photo-viewer .photo-viewer__navigation--next {
  @apply text-white;
}

.photo-viewer .photo-viewer__navigation--prev svg,
.photo-viewer .photo-viewer__navigation--next svg {
  @apply w-full h-full;
  fill: currentColor;
  max-height: 14px;
  margin: auto;
}

/** build dismiss/summon animation for navigation elements **/
.photo-viewer .photo-viewer__navigation {
  @apply standard-animation;
}
.photo-viewer .photo-viewer__navigation.photo-viewer__navigation--next {
  animation-name: summon-right;
}
.photo-viewer .photo-viewer__navigation.photo-viewer__navigation--prev {
  animation-name: summon-left;
}
.photo-viewer .photo-viewer__navigation.photo-viewer__navigation--next.swiper-button-hidden {
  animation-name: dismiss-right;
}
.photo-viewer .photo-viewer__navigation.photo-viewer__navigation--prev.swiper-button-hidden {
  animation-name: dismiss-left;
}

/**
 * We want to make the tap target larger in the y-direction to see
 * override the default Swiper styles by 2x.
 */
.swiper-button-next, .swiper-button-prev {
  height: 88px !important;
  width: 57px !important;
  margin-top: -44px !important;
  background-size: 57px 88px !important;
}

.swiper-button-next, .swiper-container-rtl {
  right: -5px !important;
}

.swiper-button-prev, .swiper-container-rtl {
  left: -5px !important;
}