/* Items of the trade window (see TradeWindow) look like slots, but their own class keeps the inventory mouse handlers away */
.slot,
.trade-item {
  width: 32px;
  height: 32px;
  background-image: url("/png/item.png?v=144ce53c48c0");
  position: relative;
  border: 1px solid #111;
  /* Prevent rapid (ctrl+)clicks from selecting the stack count text */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hovered and selected slots use the accent of the theme (see theme.css) */
.slot:hover,
.trade-item:hover {
  box-shadow: 0px 0px 0px 1px var(--color-accent) inset;
}

.slot.selected {
  box-shadow: inset 0 0 8px var(--color-accent);
}

/* Rarity glows (see Slot.getRarityColor, currently turned off): the rarity colors of the Loot channel */
.slot.legendary {
  box-shadow: inset 0 0 8px var(--color-rarity-legendary);
}

.slot.epic {
  box-shadow: inset 0 0 8px var(--color-rarity-epic);
}

.slot.rare {
  box-shadow: inset 0 0 8px var(--color-rarity-rare);
}

.slot.uncommon {
  box-shadow: inset 0 0 8px var(--color-rarity-uncommon);
}

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

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

/* Charges or time left of items such as amulets and rings (Settings > Gameplay): smaller so times like 19:59 stay inside the slot */
.slot > .count.details,
.trade-item > .count.details {
  font-size: 8px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  bottom: 1px;
  right: 1px;
}