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

.slot {
  --size: calc(var(--unit) * 50px);
  --space: calc(var(--unit) * 10px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: var(--size);
  image-rendering: pixelated;
  user-select: none;
  width: var(--size);
}

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

.qty {
  bottom: calc(var(--space) / -1.25);
  font-family: monospace;
  font-size: calc(var(--space) * 2);
  line-height: 1;
  position: absolute;
  right: calc(var(--space) / -1.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);
  }
}