<h1>Demo for CSS Timer</h1>

<section class=buttons>
	<label><input id="print" type="radio" name="buttons"/>Download</label>
	<label><input type="radio"  name="buttons" checked/>Reset</label>
</section>


<section class=countdown>
	<strong>You can download in <span class=timer></span> seconds</strong>
	<div class="bar">
		<div class="bar-dashes"><i></i><i></i><i></i><i></i><i></i></div>
		<div class="bar-bg"></div>
	</div>
</section>


<section class=download>
	<a href="#">Nothing.pdf is ready for download</a>
</section>

@property --n {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}
@keyframes count {
	from { --n: 5; }
	to { --n: 0; }
}

:has(#print:checked){
	--time: 5s;
	section.countdown {
		visibility: visible;
		.timer::after {
			animation: var(--time) linear count;
			animation-fill-mode: forwards;
			counter-reset: n calc(0 + var(--n));
			content: counter(n);
		}
		.bar-bg {
			transform: scaleX(1);
			transition: transform  var(--time);
			transform-origin: left;
		}
	}
	section.download a {
		transform: scale(1);
		transition: transform .3s var(--time);
	}
} 

section.countdown {
	visibility: hidden;
	text-align: center;
	.timer::after {
		display: inline;
		content: '';
	}
	.bar {
		margin-top: 30px;
		width: 400px;
		height: 6px;
		position: relative;
		background: white;
		> * {
			width: inherit;
			height: inherit;
			position: absolute;
		}
		.bar-dashes{
			display: flex;
			place-content: space-between;	
			i {
				width: 70px;
				background: #eee;
				border-radius: 4px;
			}		
		}
		.bar-bg {
			transform:scaleX(0);
			background: linear-gradient(to right, rgb(176	78	222	), rgb(31 78 165), rgb(6	24	241	));
			mix-blend-mode: color-burn;		
		}
	}
}

section.download {
	a { 
		display: block; 
		width: 400px;
		text-align: center;
		transform: scale(0); 
		background: rgb(30,75,217);
		border-radius: 5px;
		color: white;
		text-decoration: none;
		padding-block: 8px;
	}
}

section.buttons{
	display: flex;
	column-gap: 40px;
	input {
		display: none;
	}
	label {
		display: inline-block;
		text-align: center;
		cursor: pointer;
		width: 100px;
		line-height: 30px;
		height: 1lh;
		background: rgb(30,75,217);
		border-radius: 5px;
		color: white;
		&:has(:checked) {
			background: #bbb;
		}
	}
}

h1 {
	font-size: 1.8rem;
	margin-bottom: 0;
}

body {
	display: grid;
	height: 100vh;
	row-gap: 40px;
	place-content: center;
	place-items: center;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	font-family: 'Montserrat';	
	font-size: 12pt;
	margin: 0;
}

/* fallback intimation for when @property is not supported by the browser */
onload=()=>{
	if(!CSS.registerProperty) { 
		document.querySelector('body').innerHTML = '<br><span style="font-size:14pt;width:300px">CSS <span style="font-family:courier">@property</span> is not supported in this browser, so this example is not shown. Try Chrome :) </span>'; 
		
	} 
}