.slot {
  width: 32px;
  height: 32px;
  background-image: url("/png/item.png");
  position: relative;
  border: 1px solid #111;
}

.slot:hover {
  box-shadow: 0px 0px 0px 1px white inset;
}

.slot.selected {
  box-shadow: inset 0 0 8px white;
}

/* Rarity colors under items: off for now (see Slot.prototype.SHOW_RARITY in src/slot.js), kept for later
.slot.legendary { box-shadow: inset 0 0 8px orange; }
.slot.epic { box-shadow: inset 0 0 8px purple; }
.slot.rare { box-shadow: inset 0 0 8px blue; }
.slot.uncommon { box-shadow: inset 0 0 8px green; }
*/

.slot > canvas {
  pointer-events: none;
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 100;
}

.slot > .count {
  color: white;
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  right: 4px;
  pointer-events: none;
  z-index: 100;
}