.PartImage {
  --c-fill: var(--part-c-fill, white);
  --c-stroke: var(--part-c-stroke, black);
  --px-stroke: var(--part-px-stroke, 80px);
  --inline-size: var(--part-inline-size, 60px);
  inline-size: var(--inline-size);
  aspect-ratio: 1;
  padding: var(--part-padding, calc(var(--inline-size) * 0.125));
  overflow: visible;
  line-height: 0;
}

.PartImage,
.PartImage.light {
  --c-stroke: var(--part-c-stroke, #222);
}

.PartImage.dark {
  --c-stroke: var(--part-c-stroke, #fff);
  --px-stroke: calc(var(--part-px-stroke, 80px) * 0.5);
}

.PartImage svg {
  overflow: visible;
}

.PartImage.translucent svg {
  background: repeating-conic-gradient(
      var(--theme-background-light) 0% 25%,
      var(--theme-background) 0% 50%
    )
    50% / calc(var(--inline-size) * 0.25) calc(var(--inline-size) * 0.25);
  -webkit-mask: var(--image-url);
  mask: var(--image-url);
  -webkit-mask-size: calc(100% + 1px);
  mask-size: calc(100% + 1px);
  -webkit-mask-position: center center;
  mask-position: center center;
}

.PartImage.blueprint {
  --c-fill: transparent;
  --c-stroke: #fff;
  background-color: hsl(227, 70%, 59%);
  background-size: calc(var(--inline-size) * 0.125)
    calc(var(--inline-size) * 0.125);
  background-image: linear-gradient(to right, #fff2 1px, transparent 1px),
    linear-gradient(to bottom, #fff2 1px, transparent 1px);
}

@media (prefers-color-scheme: dark) {
  .PartImage.blueprint {
    box-shadow: none;
    --c-fill: hsl(227, 60%, 59%);
  }
}