button
	cursor: pointer

h3
	font-family: 'Rent Strike'
	font-size: 5em
	margin: 30px

input
	font-family: 'Rent Strike'
	font-size: 1.5em

.columns
	display: flex

	.column
		width: 400px
		padding: 20px

		&:nth-child(4n+1)
			--color-strong: #c0d694
			--color-weak: #e5eed4

		&:nth-child(4n+2)
			--color-strong: #6ed8d6
			--color-weak: #d3f3f2

		&:nth-child(4n+3)
			--color-strong: #d3aee1
			--color-weak: #eddef3

		&:nth-child(4n+4)
			--color-strong: #eeab87
			--color-weak: #f9e5db

		& > h3
			color: var(--color-strong)
		& > .add-tile
			background-color: var(--color-strong)

		h3
			text-align: center

		#hover-tile
			height: 110px
			margin-top: -15px

.tile
	position: relative
	height: 80px
	width: 400px

	display: grid
	align-items: center
	margin-bottom: 15px
	border: none
	background-color: var(--color-weak)

	svg.drag-gripper
		color: var(--color-strong)
		position: absolute
		padding: 8px
		top: 17px // Centered in 80px with 30px body and 8px padding
		left: 15px
		border-radius: 8px
		cursor: grab

	&::after
		width: 400px
		height: 20px
		content: ''
		position: absolute
		top: -20px
		z-index: -1 // Prevent fluttering when moving mouse up

	input
		padding: 20px
		margin: 0
		height: 40px
		background: none
		border: none
		text-align: center
		font-size: 2.6em
		width: 360px

		&:focus-visible
			border: none

	.tile-stickers
		position: absolute
		top: 0
		left: 0
		pointer-events: none // Allow clicking the input box below this

	&.add-tile
		padding: 0
		text-align: center
		font-weight: bold
		font-size: 80px
		color: white
		line-height: 0

#floaty-tile
	position: absolute

	&.hovering-1 > .tile
		--color-weak: #e5eed4
		--color-strong: #c0d694

	&.hovering-2 > .tile
		--color-weak: #d3f3f2
		--color-strong: #6ed8d6

	&.hovering-3 > .tile
		--color-weak: #eddef3
		--color-strong: #d3aee1

	&.hovering-4 > .tile
		--color-weak: #f9e5db
		--color-strong: #eeab87

	& > .tile
		position: relative
		top: -40px
		left: -40px
		pointer-events: none

// Disable selection while dragging a tile
// broken on latest firefox tho
body:has( > #floaty-tile)
	user-select: none