.image {
  z-index: 1;
}

.image,
.image__overlay-image {
  @apply no-tap-highlight;
}

.image__overlay-content,
.image__overlay-image {
  @apply absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.image__overlay-image {
  opacity: 0;
}

.image__overlay-content {
  /*@apply disable-interaction;*/
  top: 0;
}

.image--no-src {
  content: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}

.image--bubble {
  padding: 5%;
  border-radius: 25%;
  background-color: transparent !important;
}

.image--bubble-soft {
  padding: .5%;
  border-radius: 5%;
  background-color: transparent !important;
}

.image--prevent-interactions {
  user-select: none;
  -webkit-user-select: none;

  touch-callout: none;
  -webkit-touch-callout: none;
}

.image--performant {
  object-fit: contain;
  width: 100vw;

  @media (max-width: 1024px) {
    height: 85vh;
  }

  @media (min-width: 1024px) {
    height: 100vh;
  }

  /** Center */
  margin: 0 auto;
}

/** A portrait image **/
.image--portrait {
  width: 100%;
}

.image--landscape {
  height: 100%;
}

.image--with-blur {
  /**
   * We need to add the transform transition-duration such that the zoom transition-
   * duration isn't overridden
   */
  transition: filter 75ms ease-in, transform 300ms;
  /**
   * Performance helpers
   */
  will-change: filter;
  transform: translateZ(0);
}

.image--blur {
  filter: blur(15px);
}

.image--with-fade {
  opacity: 1.0;
  transition: opacity 75ms ease-in;
  will-change: opacity;
}

.image--fade {
  opacity: 0.3;
}

.image__progress,
.image__checkbox {
  @apply absolute;
  bottom: 15px;
  z-index: 2;
}

.image__checkbox {
  right: 15px;
}

.image__progress {
  left: 15px;
}