:root {
	--swordle-empty: var(--slate-200);
	--swordle-empty-text: var(--slate-800);
	--swordle-used: var(--slate-700);
	--swordle-correct: var(--emerald-500);
	--swordle-nearly: var(--amber-500);
	--swordle-key: var(--slate-500);
	--swordle-text: var(--slate-50);
}

span.correct {
	color: var(--swordle-text) !important;
	background-color: var(--swordle-correct) !important;
	border-color: var(--swordle-correct) !important;
}
span.nearly {
	color: var(--swordle-text) !important;
	background-color: var(--swordle-nearly) !important;
	border-color: var(--swordle-nearly) !important;
}
span.used {
	color: var(--swordle-text) !important;
	background-color: var(--swordle-used) !important;
}

#swordle-board {
	gap: var(--spacing-2);

	span {
		color: var(--swordle-empty-text);
		background-color: var(--swordle-empty);
		border: 2px solid var(--slate-500);
		align-content: center;
		text-align: center;
		font-weight: bold;
		font-size: var(--font-2xl);

		transform: rotateX(0deg);
		transition: transform 0.8s;
		transform-style: preserve-3d;
	}

	span.letter {
		border-color: var(--swordle-empty-text);
		box-shadow: var(--shadow-sm);
		animation: expand 0.3s;
	}
	span.error {
		animation: shake 0.5s;
	}
	span.chosen {
		transform: rotateX(180deg);
	}


}

.keyboard {
	padding: var(--spacing-2);
	margin-top: var(--spacing-8);
	user-select: none;

	div {
		margin-bottom: var(--spacing-2);
		display: grid;
		gap: var(--spacing-2);
		grid-template-columns: repeat(10, 1fr);
	}
	div:nth-of-type(2) {
		margin-left: var(--spacing-4);
		margin-right: var(--spacing-4);
		grid-template-columns: repeat(9, 1fr);
	}

	div:nth-of-type(3) {
		grid-template-columns: repeat(11, 1fr);
	}

	span {
		padding: var(--spacing-2);
		text-transform: uppercase;
		font-weight: bold;
		font-size: var(--font-2xl);
		display: inline-block;
		color: var(--swordle-text);
		background-color: var(--swordle-key);
		border-radius: var(--spacing-1);
		align-content: center;
	}

	span.enter {
		font-size: var(--font-sm);
		grid-column: 1 / span 2;
	}

	span.delete {
		font-size: var(--font-sm);
		grid-column: 10 / span 2;
		display: flex;
		align-content: center;
		justify-content: center;

		svg {
			width: var(--spacing-7);
		}
	}
}

@keyframes expand {
	0% { transform: translate(-1px, -1px) scale(1.1); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}