img.bne-img-fallback {
  background-color: #f2f6fc;
  transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

img.bne-img-loading {
  background-image: linear-gradient(110deg, #eff4fc 8%, #e3ebf8 18%, #eff4fc 33%);
  background-size: 200% 100%;
  animation: bneImageShimmer 1.2s linear infinite;
  filter: saturate(0.92);
}

img.bne-img-ready {
  animation: none;
  background-image: none;
}

img.bne-img-fallback-state {
  animation: none;
  background-image: none;
  background-color: #eef3fb;
  border: 1px solid #d7e2f1;
  object-fit: cover;
}

img.bne-img-fallback-state[data-placeholder-type="qr"],
img.bne-img-fallback[data-placeholder-type="qr"] {
  object-fit: contain;
  padding: 8px;
  background-color: #f8fbff;
}

img.bne-img-fallback-state[data-placeholder-type="avatar"],
img.bne-img-fallback[data-placeholder-type="avatar"] {
  object-fit: cover;
  border-radius: 999px;
}

.legacy-image-preview.bne-img-fallback-state,
.studio-preview-slot img.bne-img-fallback-state {
  border-color: #cbd8ea;
}

@keyframes bneImageShimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}