@import url('./lqip.css') layer(lqip);

:root {
	color-scheme: light dark;

	--color-primary: light-dark(rgb(9 75 105), rgb(42 164 245));
	--color-background: light-dark(rgb(238 238 238), rgb(20 20 20));
	--color-text: light-dark(rgb(40 40 40), rgb(220 220 220));

	--font-primary: 'Akshar', sans-serif;
}

* {
	box-sizing: border-box;
	position: relative;
}

body {
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-primary);
	font-size: 1.3em;
	font-weight: 300;
	line-height: 1.7;
	margin: 0;
	padding: 20px;
	-webkit-font-smoothing: antialiased;
}

h1 {
	color: var(--color-text);
	font-size: 3em;
	font-weight: 300;
	margin-block: 0 0.5em;
	text-shadow: 2px 2px 0 var(--color-background),
		/* 4px 4px 0 rgb(from var(--color-primary) r g b / 0.5), */
		6px 6px 10px rgb(from var(--color-primary) r g b / 0.4);
}

header {
	margin: 1em auto;
	max-width: 700px;

	p.note {
		&::before {
			background-color: light-dark(rgb(255 58 0), rgb(255 188 0));
			content: '';
			display: block;
			height: 1.7em;
			mask: url('./images/icon-warning.svg') no-repeat center / contain;
			position: absolute;
			right: calc(100% + 0.5em);
			top: 0;
			width: max(24px, round(1em, 6px));
		}
	}

	.controls {
		input[type=file] {
			display: none;
		}
	}
}

code {
	background-color: rgb(from var(--color-text) r g b / 0.1);
	border-radius: 0.5em;
	padding: 0.2em 0.4em;
}

button {
	align-items: center;
	background-color: transparent;
	border: 2px solid var(--color-primary);
	border-radius: 0.4em;
	color: var(--color-primary);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: inherit;
	gap: 0.5em;
	justify-content: center;
	margin-block: 0.4em;
	padding: 0.5em 1em;

	&:active {
		background-color: var(--color-text);
		border-color: var(--color-text);
		color: var(--color-background);
	}

	&.icon {
		&::before {
			--size: max(round(1em, 6px), 24px);
			background-color: currentcolor;
			content: '';
			display: block;
			mask: no-repeat center / contain;
			height: var(--size);
			width: var(--size);
		}
	}
}

#select-images-button::before {
	mask-image: url('./images/icon-file-open.svg');
}

#toggle-colors::before {
	mask-image: url('./images/icon-palette.svg');
}

main {
	display: block;
	margin: auto;
	width: 100%;
}

.images {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(300px, 700px));
	place-content: center;
}

.demo {
	container: demo / inline-size;
	display: grid;
	gap: 0.5em;
	grid-template-columns: 3fr 3fr;

	&, img {
		view-transition-name: match-element;
	}

	input {
		display: none;
	}

	img {
		display: block;
	}

	img,
	.preview {
		min-height: 30cqw;
		width: 100%;
	}

	&.loaded {
		img,
		.preview {
			min-height: revert;
		}
	}

	canvas {
		aspect-ratio: 1;
		display: block;
		image-rendering: pixelated;
		width: 100%;
	}

	.colors {
		display: none;
		flex-direction: column;
		gap: inherit;

		.packed-colors {
			aspect-ratio: 3 / 1;
			background: linear-gradient(
				to right,
				var(--lqip-c0) 33%,
				var(--lqip-c1) 33%,
				var(--lqip-c1) 66%,
				var(--lqip-c2) 66%
			);
		}

		code {
			font-size: 4cqw;
			text-transform: uppercase;
		}
	}

	.preview {
		img {
			object-position: 200vw 0;

			&:hover {
				object-position: revert;
			}
		}
	}
}

.show-colors {
	.demo {
		grid-template-columns: 3fr 3fr 2fr;

		.colors {
			display: flex;
		}
	}
}

::view-transition-group(*) {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (width < 750px) {
	header {
		p.note {
			&::before {
				display: inline-block;
				position: relative;
				right: revert;
				top: revert;
				vertical-align: middle;
			}
		}
	}
}