.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;
}

.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;
}