[enlarge-image] {
  cursor: zoom-in;
}

.enlarged-image-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  cursor: zoom-out;
  display: flex; /* establish flex container */
  flex-direction: column; /* make main axis vertical */
  justify-content: center; /* center items vertically, in this case */
  align-items: center; /* center items horizontally, in this case */

  &:after {
    content: '';
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
  }

  &.ani-enter,
  &.ani-enter:after {
    transition: $transition-enter;
  }

  &.ani-leave,
  &.ani-leave:after {
    transition: $transition-leave;
  }

  &.ani-enter:after {
    opacity: 1;
  }
  &.ani-remove:after {
    opacity: 0;
  }
}

.enlarged-image {
  z-index: 10;
  user-select: none;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  opacity: 1;
  transform-origin: top left;

  .ani-enter & {
    transition: $transition-enter;
    transform: scale(1) translate3d(0, 0, 0) !important;
  }
  .ani-remove & {
    transition: $transition-leave;
  }
}



