@use '../tokens' as t;

.image {
  // The inlined width/height give the browser the ratio; `block-size: auto` keeps
  // it as the box scales down, so a decode never moves what is under the image.
  display: block;
  max-inline-size: 100%;
  block-size: auto;

  // The second half of the reservation, and the half that survives styling: the width/height
  // attributes reserve the box only until a stylesheet sets a size of its own. `auto` when the
  // dimensions are unknown, which is what a replaced element does without this rule at all.
  aspect-ratio: var(--image-ratio, auto);

  // Painted only when the image fails to load: the browser renders the alt text
  // inside this box, and it inherits the img's own colour and font-size.
  color: t.role('fg-muted');
  font-size: t.text(sm);
}

// A <picture> only chooses a source; it must not become a box of its own, or the <img>'s
// reservation above would sit inside an inline wrapper with a line box of its own.
.picture {
  display: contents;
}