/* Explicit image frames only; transparent layers and icons are not enrolled. */
[data-media-frame][data-media-state="loading"] {
  background-color: #e8e8e8 !important;
}

:where([data-media-frame]) {
  position: relative;
}

[data-media-frame][data-media-state="error"] {
  background-color: transparent !important;
}

[data-media-image][data-media-status="error"] {
  opacity: 0;
}

.media-loading-error {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 12px;
  color: var(--muted, #666);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  pointer-events: none;
}

.media-loading-error[hidden] {
  display: none;
}