.image {
  --width: attr(width type(<number>));
  --height: attr(height type(<number>));
  --color: attr(color type(<color>));

  width: var(--width, 16px);
  height: var(--height, 16px);
  display: block;
}

.image .image__element {
  width: 100%;
  height: 100%;
}

.image .image__element.masked {
  --mask-url: url(attr(src type(<url>)));
  display: block;
  width: min(var(--width, 16px), 100%);
  height: min(var(--height, 16px), 100%);
  background-color: var(--color, currentColor);
  -webkit-mask-image: var(--mask-url, none);
  mask-image: var(--mask-url, none);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}