<main>
	<div id="demo">
		<div class="accordion-wrapper">
			<details name="accordion" open>
			<summary>Item 1</summary>
			<div class="details-content-wrapper">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
			</div>
		</details>
		<details name="accordion">
			<summary>Item 2</summary>
			<div class="details-content-wrapper">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
			</div>
		</details>
		<details name="accordion">
			<summary>Item 3</summary>
			<div class="details-content-wrapper">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
				<p>Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
			</div>
		</details>
		</div>
	</div>
</main>
<footer>
	<p>Demo built after <a href="https://mui.com/material-ui/react-accordion/" target="_top">https://mui.com/material-ui/react-accordion/</a></p>
		
	</footer>

@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
	
	details {
		transition: height 0.5s ease;
		height: 2.5rem;
		
		&[open] {
			height: auto;
			overflow: clip; /* Clip off contents while animating */
		}
	}
}


/* Animate all properties on details. This because we change the margin, border, etc when open. */
details {
	transition: all 0.5s ease;
	background: white;
}

/* Add gap around open details */
details[open]:not(:first-child) {
	margin-top: 0.5rem;
}
details[open]:not(:last-child) {
	margin-bottom: 0.5rem;
}

/* Add border to all details, but prevent a 2px-looking one when two successive details are collapsed */
details {
	border: 1px solid #ccc;
}
details:not([open]):has(+ details:not(details[open])) {
	border-bottom-color: #fff;
}

/* Animate all on summmary */
summary {
	transition: all 0.5s ease;
	padding: 0.5em 1em;
}
[open] summary {
	padding: 1em 1em;
}

summary {
	color: #333;
	cursor: pointer;
	
	/* Roll our own marker */
	display: flex;
	justify-content: space-between;

	&::marker {
		content: "";
	}
	&::after {
		content: "";
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTguNTg2LDUuNTg2Yy0wLjc4MSwwLjc4MS0wLjc4MSwyLjA0NywwLDIuODI4TDEyLjE3MSwxMmwtMy41ODUsMy41ODZjLTAuNzgxLDAuNzgxLTAuNzgxLDIuMDQ3LDAsMi44MjggIEM4Ljk3NiwxOC44MDUsOS40ODgsMTksMTAsMTlzMS4wMjQtMC4xOTUsMS40MTQtMC41ODZMMTcuODI5LDEybC02LjQxNS02LjQxNEMxMC42MzQsNC44MDUsOS4zNjYsNC44MDUsOC41ODYsNS41ODZ6Ii8+PC9zdmc+);
		background-size: cover;
		width: 1.25rem;
		aspect-ratio: 1;
		display: block;
		transform: rotate(90deg);
		transition: transform 0.5s ease;
		transform-origin: 50% 50%;
	}
	[open] &::after {
		transform: rotate(270deg);
	}

	/* Hover state */
	&:hover {
		color: #666;
	}
}

.details-content-wrapper {
	padding: 0 1em 1em;

	/* We need margin-trim … */
	:first-child { margin-top: 0; }
	:last-child {	margin-bottom: 0;	}
}

@layer reset {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html,
	body {
		height: 100%;
	}
}

@layer baselayout {
	html {
		color: #444;
		font-family: system-ui;
		line-height: 1.42;
		
		overscroll-behavior-x: none;
		overflow: auto;
	}

	main {
		max-width: 90ch;
		margin: 2rem auto;
	}

	p {
		margin-bottom: 1em;
	}
	
	#demo {
		padding: 1em;
		border: 1px solid #ccc;
		background: #f4f6f9;
	}
	footer {
		text-align: center;
		font-style: italic;
		opacity: 0.7;
	}
}