section .controls {
	column-gap: 2rem;
}
section .controls .input-wrapper.text {
	width: calc(50% - 1rem);
}

.grid-editor {
	overflow-x: auto;
	margin-top: 5rem;
	user-select: none;
}
.grid-container {
	display: inline-block;
	min-width: 100%;
}
.visual-grid {
	display: grid;
	gap: 8px;
	padding: 7rem 0 2rem 12rem;
	position: relative;
}
.grid-item {
	background-color: var(--color-dark-white);
	border: 2px solid var(--color-black);
	border-radius: 0.5rem;
	position: relative;
	min-height: 80px;
	cursor: move;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--color-black);
	user-select: none;
	z-index: 1;
}
.grid-item .delete-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	background-color: var(--color-black);
	color: var(--white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	z-index: 10;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM0Mi44MTgxIDM0Mi44MTgyIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZkZmVmZjtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjwvZGVmcz48ZyBpZD0iX+ODrOOCpOODpOODvF8xLTIiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIzNC4yNjI4LDE3MS40MDkxbDk1LjUzNzgtOTUuNTM3OGMxNy4zNTY3LTE3LjM1NjYsMTcuMzU2Ny00NS40OTcxLDAtNjIuODUzOGgwYy0xNy4zNTY2LTE3LjM1NjYtNDUuNDk3MS0xNy4zNTY2LTYyLjg1MzgsMGwtOTUuNTM3OCw5NS41Mzc4TDc1Ljg3MTIsMTMuMDE3NEM1OC41MTQ3LTQuMzM5MSwzMC4zNzQxLTQuMzM5MSwxMy4wMTc0LDEzLjAxNzRoMGMtMTcuMzU2NiwxNy4zNTY3LTE3LjM1NjYsNDUuNDk3MywwLDYyLjg1MzhsOTUuNTM3OCw5NS41Mzc4TDEzLjAxNzQsMjY2Ljk0NjljLTE3LjM1NjYsMTcuMzU2Ni0xNy4zNTY2LDQ1LjQ5NzEsMCw2Mi44NTM3aDBjMTcuMzU2NywxNy4zNTY3LDQ1LjQ5NzMsMTcuMzU2Nyw2Mi44NTM4LDBsOTUuNTM3OC05NS41Mzc4LDk1LjUzNzgsOTUuNTM3OGMxNy4zNTY3LDE3LjM1NjYsNDUuNDk3MiwxNy4zNTY2LDYyLjg1MzgsMGgwYzE3LjM1NjctMTcuMzU2NiwxNy4zNTY3LTQ1LjQ5NzIsMC02Mi44NTM4bC05NS41Mzc4LTk1LjUzNzhaIi8+PC9nPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-size: 45%;
	background-position: center;
}
.grid-item .resize-handle {
	position: absolute;
	transition: 0.2s ease;
	z-index: 5;
	bottom: -4px;
	right: -4px;
	width: 2rem;
	height: 2rem;
	cursor: nw-resize;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJf44Os44Kk44Ok44O8XzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMC45MDgyIDMyMC45MDkyIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZS13aWR0aDowcHg7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJf44Os44Kk44Ok44O8XzEtMiI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjAyLjY2ODksMzIwLjkwOTJINjVDMjkuMTAxNiwzMjAuOTA5MiwwLDI5MS44MDc2LDAsMjU1LjkwOTJzMjkuMTAxNi02NSw2NS02NWgxMjUuOTA4MnYtMTI1LjkwOTJDMTkwLjkwODIsMjkuMTAxNiwyMjAuMDA5OCwwLDI1NS45MDgyLDBzNjUsMjkuMTAxNiw2NSw2NXYxMzcuNjY5NGMwLDY1LjE5NzgtNTMuMDQyLDExOC4yMzk3LTExOC4yMzkzLDExOC4yMzk3WiIvPjwvZz48L3N2Zz4=");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
}
.grid-item .resize-handle:hover {
	opacity: 1;
}

.empty-cell {
	border: 2px dashed var(--color-dark-white);
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gray);
	cursor: pointer;
	transition: all 0.2s ease;
	min-height: 80px;
}
.empty-cell:hover {
	border-color: var(--color-black);
	color: var(--color-black);
}

.size-input-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	pointer-events: none;
}
.size-input {
	width: 10rem;
	display: block;
	border: 2px solid var(--color-black);
	border-radius: 0.5rem;
	position: absolute;
	padding: 0.8rem 1.5rem 0.6rem 1.5rem;
	background-color: transparent;
	background-color: var(--color-light-white);
	pointer-events: all;
}
.column-size-input {
	position: absolute;
	bottom: calc(100% + 2rem);
	left: 50%;
	transform: translateX(-50%);

}
.row-size-input {
	position: absolute;
	top: 50%;
	right: calc(100% + 2rem);
	transform: translateY(-50%);
}