inventory-slot-size = 64px

.inventory
	display grid
	grid-gap 0.25rem
	grid-template-columns repeat(auto-fit, inventory-slot-size)
	grid-auto-rows inventory-slot-size
	justify-content center
	width 100%
	max-width 450px
	margin 0 auto

.inventory-slot
	ui-element
	position relative
	display flex
	align-items center
	justify-content center
	font-size 2.5rem

	[draggable="true"]
		:hover
			cursor pointer

			.item-icon
				animation hover-item 1s infinite ease-in-out
	
	.icon
		margin 0
		pointer-events none

	// [data-item-id="pro-account-3"]
	// 	.item-icon
	// 		opacity 0.7

	// [data-item-id="pro-account-6"]
	// 	.item-icon
	// 		opacity 0.8

	// [data-item-id="pro-account-12"]
	// 	.item-icon
	// 		opacity 0.9

	// [data-item-id="pro-account-24"]
	// 	.item-icon
	// 		opacity 1.0

animation hover-item
	0%
		transform rotateZ(0)
	20%
		transform rotateZ(5deg)
	80%
		transform rotateZ(-5deg)
	100%
		transform rotateZ(0)

.inventory-slot-quantity
	position absolute
	bottom 0.25rem
	right 0.25rem
	font-size 0.8rem
	line-height 1em
	opacity 0.5
	pointer-events none

.drag-enter
	border-style dashed