.image {
  display: inline-block;
  overflow: hidden;
  font-size: 0;
  background-color: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  border-radius: var(--wds-image-border-radius-default, var(--wds-border-radius-400, 8px));
  max-width: 100%;
  max-height: 100%;

  /* hide default border for broken images */
  text-indent: 100vw;

  /* keep these doubled at (0,2,0): `className` lands on this same node, so
     un-doubling lets any single-class override from a consumer win where it
     currently loses */
  &#{&}--tiled {
    background-repeat: repeat;
    object-position: -100vw;
    object-fit: none;
  }

  &#{&}--show-border {
    /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
    border: var(--wds-border-width-100, 1px) solid
      var(
        --wds-color-border-dark-secondary,
        color-mix(in srgb, var(--wsr-color-D10, #000624) 12%, transparent)
      );
    box-sizing: border-box;
  }

  &#{&}--transparent {
    background-color: transparent;
  }
}