<h1>CSS <code>@scope</code> demo: proximity (1/2)</h1>

<p>This demo does not use <code>@scope</code>, highlighting the problem: the third <code>&lt;a&gt;</code> has the wrong color.</p>
<main>
	<div class="wrapper">
		<div class="light">
			<p><a href="#">What color am I?</a></p>
			<div class="dark">
				<p><a href="#">What about me?</a></p>
				<div class="light">
					<p><a href="#">Am I the same as the first?</a></p>
				</div>
			</div>
		</div>
	</div>
</main>

<footer>
	<p>Demo for <a href="https://developer.chrome.com/articles/at-scope/" target="_top">https://developer.chrome.com/articles/at-scope/</a></p>
</footer>

@layer reset, layout;


.light { background: #ccc; }
.dark  { background: #333; }
.light a { color: black; }
.dark a { color: white; }






















@layer layout {
	@layer general {
		body {
			padding: 0 0 2rem;
			width: 90%;
			max-width: 60em;
			margin: 0 auto;
		}
		body > footer {
			text-align: center;
			margin: 2rem 0;
			font-style: italic;
		}
	}
	@layer visualization {
		body > main {
			margin: 2rem auto;
		}
		.light {
			--border-color: #999;
		}
		.dark {
			--border-color: #ccc;
		}
		body > main [data-identifier] {
			position: relative;
			padding: 1.8rem 1.2rem;
			border: 2px solid var(--border-color, #ccc);
			margin: 0.5rem 0 0 0;
		}
		body > main :is(a, span) {
			display: inline-block;
		}
		body > main [data-identifier]::before {
			content: '<' attr(data-identifier) '>';
			position: absolute;
			top: 0;
			left: 0;
			font-size: 0.8rem;
			padding: 0.3em;
			background: #e4e4e4;
			color: #333;
			font-weight: normal;
			font-family: monospace;
		}
	}
	
	@layer warning {
		/* Show warning for browsers without support */
		.warning {
			padding: 1em;
			border: 1px solid black;
			z-index: 9999;
			color: black;
			background: rgba(255 255 225 / 0.9);
			z-index: 10001;
			
			width: 100%;
			margin: 1em auto;
			text-align: center;
		}
		
		:is(
			.warning:hover,
			.warning:has(:focus-within)
		) {
			opacity: 1;
		}

		.warning > :first-child {
			margin-top: 0;
		}

		.warning > :last-child {
			margin-bottom: 0;
		}

		.warning a {
			color: blue;
		}

		.warning--info {
			border: 1px solid #123456;
			background: rgba(205 230 255 / 0.8);
		}
	}
	
	@layer code {
		pre {
			border: 1px solid #dedede;
			padding: 1em;
			background: #f7f7f7;
			font-family: "Courier 10 Pitch", Courier, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 4;
		}
		
		code:not(pre code), /* output:not(code:has(output) output) */ {
			background: #f7f7f7;
			border: 1px solid rgb(0 0 0 / 0.2);
			padding: 0.1rem 0.3rem;
			margin: 0.1rem 0;
			border-radius: 0.2rem;
			display: inline-block;
		}
	}
}

@layer reset {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html {
		line-height: 1;
	}
	h1, h2, h3, h4 {
		margin: 2em 0 0.5em;
	}
	p {
		margin: 0.5em 0;
	}
}

document.querySelectorAll('*').forEach($el => {
	const identifier = [$el.nodeName.toLowerCase()];
	if ($el.id) {
		identifier.push(`#${$el.id}`);
	}
	if ($el.classList.length) {
		identifier.push(`.${Array.from($el.classList).join('.')}`);
	}

	// Images is replaced content, so gets a special treatment
	if ($el.nodeName.toLowerCase() == 'img') {
		const $wrapper = document.createElement('span');
    $wrapper.classList.add('img');
    $wrapper.innerHTML = $el.getAttribute('src').split('/').at(-1);
		$wrapper.setAttribute('data-identifier', identifier.join(''));
    $el.parentNode.insertBefore($wrapper, $el);
    $el.remove();
	} else {
		$el.setAttribute('data-identifier', identifier.join(''));
	}
});