/* image.st.css */
@namespace "Image";

.root {
  -st-states:
    hasAspectRatio,
    isFillingContainer,
    isVideo,
    isLandscape,
    isPortrait,
    isSquare,
    imageSize(enum(inset, outset, fullBleed));
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

.imageContainer {
  position: relative;
  overflow: hidden;
}

.figure {}

.figcaption {}

.caption {}

.captionGroup {}

.copyright {}

.icon {}

.img {
  width: 100%;
  height: auto;
  display: block;
  /* smooth loading */
  animation: blur 1s linear 0s;
}

@keyframes blur {
  0% {
    filter: blur(8px);
  }

  50% {
    filter: blur(4px);
  }
}

.root:hasAspectRatio::img {
  position: absolute;
  top: 0;
  left: 0;
}

.root:isFillingContainer::img {
  /* This is not 0 because ChromeVox otherwise will ignore it. Other screenreaders are fine */
  opacity: 0.001;
}

.root:isFillingContainer:isVideo::img {
  opacity: 1;
}