/*
    NOTE I separated these styles to avoid FOUC when the polyfill reapplies,
    it can be merged when support grows.
*/

@layer elements {
	main {
		anchor-name: --main;
	}
}

@layer classes {
	/* SIDENOTES */

	:has(+ [class^='sidenote-'])::before {
		content: '';
		position: absolute;
		anchor-name: --sidenote-anchor;
	}
	
	[class^='sidenote-'] {
		position: absolute;
		top: anchor(--sidenote-anchor top);
		anchor-name: --sidenote;
	}
	
	[class^='sidenote-']:not(:first-of-type) {
		top: max(
			anchor(--sidenote-anchor top),
			calc(anchor(--sidenote bottom) + var(--spacing-relative))
		);
	}

	.sidenote-left {
		right: anchor(--main left);
	}

	.sidenote-right {
		left: anchor(--main right);
	}
}

@layer layout {
	/* HEADER */

	main > header > div > :first-child {
		anchor-name: --header;
	}

	/* READ THE POST */

	main > aside {
		top: anchor(--header top);
		left: anchor(--header right);
	}

	/* LEARNINGS */

	#learnings > div {
		anchor-name: --learnings;

		height: calc(anchor-size(--learnings-first height) / 2);
	}

	#learnings > header {
		top: anchor(--learnings bottom);
		right: anchor(--learnings left);
	}

	#learnings > ul > li:first-child {
		anchor-name: --learnings-first;
	}

	/* MAKING TOGETHER */

	#making-together > aside {
		top: anchor(--making-together top);
		right: anchor(--making-together left);
	}

	#making-together > div {
		anchor-name: --making-together;
	}

	/* LET'S PLAY */

	#lets-play > aside {
		top: auto;
		bottom: anchor(--lets-play bottom);
		right: anchor(--lets-play left);
	}

	#lets-play > div > div > article:first-child::before {
		anchor-name: --lets-play;
	}
}