:root {
  --transition-duration: 300ms;
  --transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
  --overlay-background: #f9f4f1;
  --loader-color: #fff;
  --image-max-height: 85vh;
  --image-max-width: 85vw; }

/**
 * Parvus trigger
 *
 */
.parvus-zoom {
  cursor: url("../images/zoom-in.svg") 18 18, zoom-in;
  display: block;
  transition: transform var(--transition-duration) var(--transition-timing-function);
  will-change: transform; }
  @media screen and (prefers-reduced-motion: no-preference) {
    .parvus-zoom:active {
      transform: scale(1.04); } }

/**
 * Parvus
 *
 */
.parvus {
  align-items: center;
  bottom: 0;
  contain: strict;
  cursor: url("../images/zoom-out.svg") 18 18, zoom-out;
  display: flex;
  justify-content: center;
  left: 0;
  line-height: 1.5;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1337; }
  .parvus[aria-hidden='true'] {
    display: none; }
  .parvus__overlay {
    background-color: var(--overlay-background);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    will-change: opacity; }
  .parvus__image {
    will-change: transform; }
    @media screen and (prefers-reduced-motion: no-preference) {
      .parvus__image:not(.parvus__image--is-dragging) {
        transition: transform var(--transition-duration) var(--transition-timing-function); } }
    .parvus__image img {
      display: block;
      height: auto;
      max-height: var(--image-max-height);
      max-width: var(--image-max-width);
      transform-origin: left top;
      width: auto; }
  .parvus__loader {
    display: inline-block;
    height: 100px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px; }
    .parvus__loader::before {
      animation: spin 1s infinite;
      border-radius: 100%;
      border: 4px solid #949ba3;
      border-top-color: var(--loader-color);
      bottom: 0;
      content: '';
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1; }

@keyframes spin {
  to {
    transform: rotate(360deg); } }