input.checkbox(type="checkbox" checked aria-label="Tick the checkbox to open/close the prompt")

.message_container
	.message(augmented-ui="exe tl-clip br-clip")
		.title(augmented-ui="exe tl-clip br-clip") Attention
		p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo, corporis eum, dolorum sed voluptate tempora unde placeat quas ut adipisci illum ab ea commodi sunt. Dolor dolorum neque facere tempora.
		
script.
	var rsw_powered = {};
	rsw_powered["augmented-ui"] = true;

html {
	display: flex;
	min-height: 100%;
	min-height: 100vh;
}
body {
	background: #000;
	font-family: Helvetica, Arial, sans-serif;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	color: cyan;
	--message: "Tick to open";
	--bg: transparent;
	
	position: fixed;
	top: 0;
	left: 0;
	margin: 1em;
	&:checked {
		--bg: unset;
		--message: "Untick to close";
	}
	&:before, &:after {
		content: "";
		display: inline-block;
		vertical-align: middle;
	}
	&:before {
		padding: .5em;
		background: var(--bg, cyan);
		border: 1px solid;
	}
	&:after {
		content: var(--message);
		color: #fff;
		margin-left: .5em;
	}
}

.message_container {
	filter: drop-shadow(0 0 8px cyan);
	
	.message {
		background: #000;

		--aug-border: 2px;
		--aug-border-bg: cyan;
		width: calc(100% - 20px);
		max-width: 640px;
		margin: 0 auto;
		overflow: hidden;
		transition: all .5s;
		
		.title {
			display: inline-block;
			padding: .5em 2em;

			font-weight: bold;
			letter-spacing: .1em;
			text-align: center;
			text-transform: uppercase;
			--aug-inset: .25em;
			--aug-inset-bg: #ff0;
			--aug-br: .75em;
		}
		p {
			color: #fff;
			padding: 1em;
			margin: 0;
			display: block;
			line-height: 1.4em;
			text-align: justify;
			max-height: 10em;
		}
	}
}

.checkbox {
	& ~ .message_container > .message {
		max-height: 0;
		opacity: 0;
	}
	&:checked ~ .message_container > .message {
		max-height: 300px;
		opacity: 1;
	}
}

.footer {
	background: rgba(64, 64, 64, .1);
	backdrop-filter: blur(8px);
	position: fixed;
	left: 2.5%;
	right: 2.5%;
	bottom: -2px;
	--aug-border: 2px;
	--aug-border-bg: cyan;
	
	color: #fff;
	padding: .5em;
	text-align: center;
	
	ul {
		display: block;
	}
	ul li {
		display: inline-block;
		padding: .5em 1em;
	}
	a {
		color: cyan;
		text-decoration: none;
	}
	a:hover, a:focus {
		text-decoration: underline;
	}
}