<section class=scroll-container>
	<label class='items close'>Close the messages<input type="radio" name=radio  /></label>
	<p class=items>Alert from Project X</p>
	<p class=items>Willow's appointment at <i>Scrubby's</i></p>
	<p class=items>Message from (-_-)</p>
	<p class=items>NYT Feed: <u>Weather In... (Read more)</u></p>
	<p class=items>6 more items to check in your vacation list!</p>
	<label class='items open'>Show the messages<input type="radio" name=radio /></label>
</section>

@property --int {
	syntax: "<integer>";
	inherits: false;
	initial-value: 6;
}

@property --hgt {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@keyframes open { to { --int: 0; --hgt:60px;} }
@keyframes close { to { --int: 6; --hgt:0px;} } 

.scroll-container {
	width: 400px; 
	display: grid; 
	grid-template-rows: repeat(calc(var(--int)), var(--hgt)); 
	transition: row-gap .3s cubic-bezier(.8, .5, .2, 1.4);
	
	&:has(.open :checked) {
	/* open action */
		animation: open .3s ease-in-out forwards;
		.open { display: none; }
	/* styling */
		row-gap: 10px;
		.items { color: rgb(113 124 158); transition: color .3s .1s;
		}
		.close { color: black }
	}
	&:has(.close :checked) {
	/* close action */
		--int: 0;
		--hgt: 60px;
		animation: close .3s ease-in-out forwards;
	/* styling */
		row-gap: 0px;
		.items { color: transparent; transition: color .3s;
		}
	}
	
	/* following rules are for styling */
	.items {
		padding-inline: 20px;
		border-radius: 10px;
		background: linear-gradient(to right, rgb(220 223 235), rgb(212 232 242));
		box-shadow: 0 0 4px rgb(164 173 204);
		font: 12pt/60px 'poppins';
		color: transparent;		
		&:is(label) { font-size: 14pt; }
		
	}
	.open { color: black !important;  }	
	p { 
		margin: 0; 
		pointer-events: none;
	}
	input { appearance: none;  }
	label { cursor: pointer;}
}
body {
	/* 'body' style rules are for demo purposes only */
	height: 100vh;
	display: grid;
	place-content:  center;
	margin: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}