silphius/app/react/components/dom/slot.module.css

.slot {
  --size: calc(var(--unit) * 50px);
  --space: calc(var(--unit) * 10px);
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: inherit;
  display: inline-block;
  height: var(--size);
  image-rendering: pixelated;
  width: var(--size);
  &:focus-visible {
    outline: none;
  }
}

.slotInner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
  height: 100%;
  padding: var(--space);
  position: relative;
  width: 100%;
}

.qty {
  bottom: calc(var(--space) * 0.125);
  font-family: monospace;
  font-size: calc(var(--space) * 2);
  line-height: 1;
  position: absolute;
  right: calc(var(--space) * -0.25);
  text-shadow:
    0px -1px 0px white,
    1px 0px 0px white,
    0px 1px 0px white,
    -1px 0px 0px white
  ;
  &:global(.q-2) {
    font-size: calc(var(--space) * 1.75);
  }
  &:global(.q-3) {
    font-size: calc(var(--space) * 1.5);
  }
  &:global(.q-4) {
    font-size: calc(var(--space) * 1.25);
  }
}