.container {
	padding: 3rem;
	background: var(--color-body);
}

.inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.grid {
	display: grid;
	padding: 1rem 0 3rem 0;
	grid-gap: 0.75rem;
}

.row {
	display: grid;
	grid-gap: 0.75rem;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.key {
	position: relative;
	width: 5rem;
	height: 5rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(
			180deg,
			var(--color-background) 0%,
			var(--color-foreground) 100%
		),
		var(--color-background);
	border-radius: var(--border-radius);
	box-shadow: 0rem 0.375rem 0rem rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;
	font-family: var(--key-font);
	font-size: 1.25rem;
	transition: box-shadow 0.2s;

	&:hover {
		box-shadow: 0 0 10rem rgba(255, 255, 255, 0.1) inset !important;
	}

	&:focus {
		border: 2px solid rgba(255, 255, 255, 0.25);
		outline: none;
	}
	&:active {
		outline: none;
	}

	& span {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0.25rem 1rem;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 0.5rem;
		text-transform: uppercase;
		transform: translate3d(-50%, -50%, 0);
		transition: background-color 0.2s, font-size 0.2s;
		white-space: nowrap;
	}

	&.missing span {
		background: var(--color-orange);
		border-radius: 24rem;
	}

	&.rebind {
		box-shadow: 0 0 24rem rgba(36, 161, 109, 0.2) inset;
		& span {
			z-index: 1000;
			padding: 0.25rem 0.5rem;
			background: var(--color-green);

			font-size: 0.75rem;
			text-transform: none;
		}

		&:hover {
			box-shadow: 0 0 24rem rgba(36, 161, 109, 0.2) inset;
		}
	}

	&.highlight {
		animation: flash 0.3s linear both;
	}

	@keyframes flash {
		0% {
			box-shadow: 0 0 10rem var(--flash) inset;
		}
		100% {
			box-shadow: 0 0 10rem rgba(0, 0, 0, 0) inset;
		}
	}
}

.icon {
	position: absolute;
	top: -25%;
	left: 50%;
	transform: translateX(-50%);

	& img {
		width: 2rem;
		height: 2rem;
	}
}
