.image {
  /*
  * reset image styles (initial: all was causing conflicts
  * w/ View's CSS and overriding height/width attrs)
  */
  margin: 0;
  padding: 0;
  float: none;
  top: auto;
  bottom: auto;
  left: auto; /* stylelint-disable-line property-blacklist */
  right: auto; /* stylelint-disable-line property-blacklist */
  line-height: normal;
  position: static;
  transform: none;
  max-height: none;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}

.overlayLayout {
  display: inline-block;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  top: 0px; /* stylelint-disable-line unit-blacklist, length-zero-no-unit */
  left: 0px; /* stylelint-disable-line property-blacklist, unit-blacklist, length-zero-no-unit */
  width: 100%;
  height: 100%;
}

.has-overlay {
  display: block; /* when image is contained in overlay, avoid extra space at bottom from inline/line-height */
}

/* if overlay or filters are updated via props, make the transition look smooth */

.has-filter,
.overlay {
  transition: all var(--effectTransitionDuration);
}

.cover,
.contain,
.container--has-cover,
.container--has-background {
  width: 100%;
  height: 100%;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;

  &.has-overlay {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.container--has-contain {
  height: inherit;
}

.container--has-background {
  background-repeat: no-repeat;
  background-position: center;

  &.container--has-contain {
    background-size: contain;
  }

  &.container--has-cover {
    background-size: cover;
  }
}

.container--has-overlay {
  position: relative;
  overflow: hidden; /* stops blurred images extending past overlay borders */
}