:root {
	--icon-ghost-sm: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path fill="rgba(255,255,255,0.333)" d="M40.1 467.1l-11.2 9c-3.2 2.5-7.1 3.9-11.1 3.9C8 480 0 472 0 462.2V192C0 86 86 0 192 0S384 86 384 192V462.2c0 9.8-8 17.8-17.8 17.8c-4 0-7.9-1.4-11.1-3.9l-11.2-9c-13.4-10.7-32.8-9-44.1 3.9L269.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6l-26.6-30.5c-12.7-14.6-35.4-14.6-48.2 0L141.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6L84.2 471c-11.3-12.9-30.7-14.6-44.1-3.9zM160 192a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>');
	--icon-ghost-md: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path fill="rgba(255,255,255,0.667)" d="M40.1 467.1l-11.2 9c-3.2 2.5-7.1 3.9-11.1 3.9C8 480 0 472 0 462.2V192C0 86 86 0 192 0S384 86 384 192V462.2c0 9.8-8 17.8-17.8 17.8c-4 0-7.9-1.4-11.1-3.9l-11.2-9c-13.4-10.7-32.8-9-44.1 3.9L269.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6l-26.6-30.5c-12.7-14.6-35.4-14.6-48.2 0L141.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6L84.2 471c-11.3-12.9-30.7-14.6-44.1-3.9zM160 192a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>');
	--icon-ghost-lg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path fill="rgba(255,255,255,1)" d="M40.1 467.1l-11.2 9c-3.2 2.5-7.1 3.9-11.1 3.9C8 480 0 472 0 462.2V192C0 86 86 0 192 0S384 86 384 192V462.2c0 9.8-8 17.8-17.8 17.8c-4 0-7.9-1.4-11.1-3.9l-11.2-9c-13.4-10.7-32.8-9-44.1 3.9L269.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6l-26.6-30.5c-12.7-14.6-35.4-14.6-48.2 0L141.3 506c-3.3 3.8-8.2 6-13.3 6s-9.9-2.2-13.3-6L84.2 471c-11.3-12.9-30.7-14.6-44.1-3.9zM160 192a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>');
}

*, *:before, *:after {
	box-sizing: border-box;
}

html {}

body {
	font-family: sans-serif;
	background-color: #fff;
	color: #333;
	margin: 0;
	padding: 0;
}

.sprite-editor {
	display: grid;
	grid-template-columns:4fr 1fr 1fr 4fr;
	grid-template-rows: auto auto auto auto auto 1fr;
	grid-template-areas: 
		"canvas directions palette preview"
		"canvas layers palette preview"
		"canvas alpha palette preview"
		"canvas playback palette preview"
		"frames frames sequences sequences"
		"encoded encoded encoded encoded";
	gap: 1rem;
	padding: 1rem;
	width: 100vw;
	height: 100vh;
}

.sprite-canvas {
	grid-area: canvas;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	position: relative;
	border: solid 1px black;
	margin: 0;
	padding: 0;

	svg {
		display: block;
		width: 100%;
		height: auto;
	
		g {
			&.single rect {
				stroke: gray;
			}
			
			&.back rect {
				stroke: red;
			}
			
			&.middle rect {
				stroke: green;
			}
			
			&.front rect {
				stroke: blue;
			}
	
			rect {
				stroke-width: 0.1%;
				cursor: pointer;
			}
		}
	}	
}

.sprite-preview {
	grid-area: preview;
	justify-self: flex-end;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	position: relative;
	border: solid 1px black;
	margin: 0;
	padding: 0;

	svg {
		display: block;
		width: 100%;
		height: auto;
		transform: scale(0.5);
	}
}

.sprite-controls {
	display: contents;

	fieldset {
		text-align: center;
		align-items: center;
		border: solid 1px black;
		padding: 0.5rem;
		margin: 0;
	
		legend {
			text-align: left;
		}
	}
	
	[type="text"], 
	select {
		min-height: 2rem;
	}
	
	button {
		cursor: pointer;
		min-height: 2rem;
	}
}

.sprite-directions {
	grid-area: directions;
	display: grid;
	gap: 2px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr auto auto auto 1fr;

	&:before {
		content: "";
		display: block;
		grid-column: span 3;
	}

	button:before {
		display: block;
		content: attr(data-action);
		text-transform: uppercase;
	}
}

.sprite-palette {
	grid-area: palette;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 2px;
	align-items: center;
	justify-content: space-around;

	input {
		display: block;
		cursor: pointer;
		appearance: none;
		width: 100%;
		aspect-ratio: 1 / 1;
		margin: 0;
	
		&:checked {
			outline: dashed 2px red;
		}
	}
}

.sprite-opacity {
	grid-area: alpha;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 2px;

	input {
		cursor: pointer;
		appearance: none;
		width: 100%;
		aspect-ratio: 1;
		margin: 0;
		padding: 20%;
		background-origin: content-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: navy;

		&:checked {
			outline: dashed 2px red;
		}
		
		&[value="0.000"] {
			background-image: none;
		}
		
		&[value="0.333"] {
			background-image: var(--icon-ghost-sm);
		}
		
		&[value="0.667"] {
			background-image: var(--icon-ghost-md);
		}
		
		&[value="1.000"] {
			background-image: var(--icon-ghost-lg);
		}
	}
}

.sprite-stack {
	grid-area: layers;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 2px;

	input {
		cursor: pointer;
		appearance: none;
		width: 100%;
		aspect-ratio: 1;
		margin: 0;
		position: relative;
	
		&:checked {
			outline: dashed 2px red;
		}
		
		&[value="single"] {
			background-color: gray;
		}
		
		&[value="back"] {
			background-color: red;
			transform: translate(25%, -12.5%);
			z-index: 10;
		}
		
		&[value="middle"] {
			background-color: green;
			z-index: 20;
		}
		
		&[value="front"] {
			background-color: blue;
			transform: translate(-25%, 12.5%);
			z-index: 30;
		}
	}
}

.sprite-playback {
	grid-area: playback;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	label {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		width: 100%;
	}

	span {
		font-size: 0.75rem;
	}

	input[type="range"] {
		width: 100%;
	}

	input[type="color"] {
		width: 100%;
	}
}

.sprite-frames {
	grid-area: frames;
	border: solid 1px black;
	padding: 0.5rem;

	> div {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: 0.5rem;
	}

	label {
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 0.5rem;
		align-items: center;
		background-color: whitesmoke;
		border: solid 1px black;
		padding: 0.5rem;

		&:has(input:checked) {
			outline: dashed 2px red;
		}

		input[type="radio"] {
			visibility: hidden;
			position: absolute;
		}

		svg {
			background-color: white;
			grid-column: span 3;
			border: solid 1px black;
			aspect-ratio: 1;
			width: 100%;
			height: auto;
		}

		span {
			font-size: 0.75rem;
			text-align: center;
		}

		button {}

	}

	button[data-action="add"] {
		font-size: 2rem;
	}
}

.sprite-sequences {
	grid-area: sequences;
	border: solid 1px black;
	padding: 0.5rem;

	> div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.75rem;
		
		input[type="radio"] {
			margin: 0;
		}
	}

	ul {
		display: contents;
		list-style: none;

		li {
			display: grid;
			grid-template-columns: auto 1fr 2fr auto;
			align-items: center;
			gap: 0.5rem;
		}

		label {
			display: contents;
			&:nth-of-type(1) {}

			&:nth-of-type(2) {}
		}

		input[type="radio"] {}

		input[type="text"] {
			min-height: 2rem;
		}

		span {
			display: none;
		}

		button[data-action="remove_sequence"] {
			cursor: pointer;
			min-height: 2rem;
			min-width: 2rem;
		}
	}

	 button[data-action="add_sequence"] {
			cursor: pointer;
			min-height: 2rem;
			width: 100%;
	}
}

.sprite-encoded {
	grid-area: encoded;

	textarea {
		width: 100%;
		height: 100%;
		word-break: break-all;
		padding: 0.5rem;
	}	
}