: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-700);
	--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);
		text-transform: uppercase;

		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 span {
	color: var(--swordle-text);
	background-color: var(--swordle-key);

	&.used {
		background-color: var(--slate-400) !important;
	}
}

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

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
	20%, 40%, 60%, 80% { transform: translateX(4px); }
}