/* CSS DIRECTORY
	1. TOKENS
	2. UTILITIES
	3. BASE
	4. COMPONENTS
*/

/* || TOKENS */

:root {
	/* Borders */
	--border: 1px solid var(--color-border);

	/* Colors */
	--color-base: oklch(0.175 0 0);
	--color-border: oklch(from var(--color-base) calc(l + 0.125) c h);
	--color-content: oklch(0.95 0 0);
	--color-contentMuted: oklch(from var(--color-content) calc(l - 0.25) c h);

	/* Sizing */
	--size-xxs: 0.25rem;
	--size-xs: 0.5rem;
	--size-s: 0.75rem;
	--size-m: 1rem;
	--size-l: 1.25rem;
	--size-xl: 1.5rem;
	--size-xxl: 2rem;

	/* Typography */
	--ff-sans: system-ui, sans-serif;

	--font-p: 400 var(--size-m) var(--ff-sans);
	--font-h2: 500 1.125rem var(--ff-sans);
	--font-h1: 700 var(--size-xxl) var(--ff-sans);

	/* Light theme */
	@media (prefers-color-scheme: light) {
		--color-base: oklch(1 0 0);
		--color-border: oklch(from var(--color-base) calc(l - 0.125) c h);
		--color-content: oklch(0.175 0 0);
		--color-contentMuted: oklch(from var(--color-content) calc(l + 0.25) c h);
	}
}

/* || UTILITIES */

.card {
	padding: var(--size-m);
	border: var(--border);
	border-radius: var(--size-xs);
}

.center-xy {
	place-content: center;
	place-items: center;
}

.interactive {
	--color-hover: white;

	cursor: pointer;

	@media (prefers-color-scheme: light) {
		--color-hover: black;
	}

	&:hover {
		background-color: color-mix(in oklch, var(--color-base), var(--color-hover) 5%);
	}
}

.stack {
	display: flex;
	flex-direction: column;
}

.vr {
	min-height: 1em;
	border-left: var(--border);
}

/* || BASE */

#root {
	gap: var(--size-xxl);
	font: var(--font-p);
	color: var(--color-contentMuted);
	background-color: var(--color-base);
}

h1,
h2 {
	color: var(--color-content);
}

h1 {
	font: var(--font-h1);
}

h2 {
	font: var(--font-h2);
}

/* || COMPONENTS */

header {
	gap: var(--size-xxs);
}

.search-box {
	display: flex;
	gap: var(--size-s);
	padding: var(--size-xs) var(--size-s);
	border: var(--border);
	border-radius: var(--size-xs);

	input:focus-visible {
		outline: none;
	}

	&:has(input:focus-visible) {
		outline: 2px solid var(--color-content);
	}

	&:hover {
		cursor: text;
	}
}

main {
	gap: var(--size-xxs);

	h2 {
		text-align: center;
	}
}

.gif {
	width: 100%;
	border-radius: var(--size-xxs);
}

.gif-wrapper {
	gap: var(--size-xs);
	min-width: 240px;
	max-width: 80vw;

	&:has([src='/gif-search/images/sonic-waiting.gif'], [src='/gif-search/images/sonic-ring.gif']) {
		.gif {
			image-rendering: pixelated;
		}

		.watermark {
			display: none;
		}
	}
}

footer {
	display: flex;
	gap: var(--size-s);
	padding: 2rem;

	a:hover {
		color: var(--color-content);
	}

	a:has(.svg-icon) {
		transition: transform 750ms;

		&:hover {
			transform: rotate(1turn);
		}
	}
}