.transition-zoom-in,
.transition-zoom-out,
.transition-zoom-resize {
  --trans-dur: 0.5;
  --trans-del: 0;
  --top: 0px;
  --left: 0px;
  --x: 0px;
  --tx: 0px;
  --y: 0px;
  --ty: 0px;
  --sc: 1;
  --tsc: 1;
  position: fixed;
  top: var(--top);
  left: var(--left);
}

.transition-zoom-resize {
  pointer-events: all !important;
  visibility: visible !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc((1 / var(--csc)) * var(--tsc))) !important;
  animation: none;
}

.transition-zoom-in {
  pointer-events: none;
  animation: zoom-in calc(var(--trans-dur) * 1s) cubic-bezier(0.5, 0, 0.5, 1)
    calc(var(--trans-del) * 1s) forwards;
}

.transition-zoom-out {
  pointer-events: none;
  animation: zoom-out calc(var(--trans-dur) * 1s) cubic-bezier(0.5, 0, 0.5, 1)
    calc(var(--trans-del) * 1s) forwards;
}

@keyframes zoom-in {
  from {
    transform: translate(var(--x), var(--y))
      scale(calc((1 / var(--csc)) * var(--sc)));
  }
  to {
    transform: translate(var(--tx), var(--ty))
      scale(calc((1 / var(--csc)) * var(--tsc)));
  }
}

@keyframes zoom-out {
  from {
    transform: translate(var(--tx), var(--ty))
      scale(calc((1 / var(--csc)) * var(--tsc)));
  }
  to {
    transform: translate(var(--x), var(--y))
      scale(calc((1 / var(--csc)) * var(--ts)));
  }
}

/*
 * VMIN ZOOM IN / OUT / RESIZE
 */
.transition-zoomed-in-vmin,
.transition-zoomed-out-vmin,
.transition-zoomed-resize-vmin {
  --trans-in-dur: 0.5;
  --trans-out-dur: 0.5;
  --trans-del: 0;

  --sx: 0px;
  --sy: 0px;
  --px: 0px;
  --py: 0px;
  --sc: 1;
  --tsc: 1;

  position: fixed;
  top: var(--top);
  left: var(--left);
  transform-origin: top left;
}

.transition-zero {
  width: 0 !important;
  height: 0 !important;
}

.transition-zoomed-in-vmin {
  position: fixed;
  pointer-events: none !important;

  left: var(--sx) !important;
  top: var(--sy) !important;

  transform: translate(0, 0) scale(var(--sc));

  animation: zoom-in-vmin calc(var(--trans-in-dur) * 1s)
    cubic-bezier(0.5, 0, 0.5, 1) calc(var(--trans-del) * 1s) forwards;
}

.transition-zoomed-out-vmin {
  position: fixed;
  pointer-events: none !important;
  left: var(--sx) !important;
  top: var(--sy) !important;
  transform: translate(-50%, -50%) scale(var(--sc));
  animation: zoom-out-vmin calc(var(--trans-out-dur) * 1s)
    cubic-bezier(0.5, 0, 0.5, 1) calc(var(--trans-del) * 1s) forwards;
}

.transition-zoomed-resize-vmin {
  position: fixed;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%) scale(var(--tsc));
}

@keyframes zoom-in-vmin {
  from {
    transform: translate(0, 0) scale(var(--sc));
  }
  to {
    transform: translate(calc(50vw - var(--sx)), calc(50vh - var(--sy)))
      scale(var(--tsc));
  }
}

@keyframes zoom-out-vmin {
  from {
    transform: translate(calc(50vw - var(--sx)), calc(50vh - var(--sy)))
      scale(var(--tsc));
  }
  to {
    transform: translate(0, 0) scale(var(--sc));
  }
}
