<button class="btn" type="button">
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__p"></span>
	<span class="btn__text">!</span>
</button>
<svg class="effects" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="fire">
			<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="fire" />
			<feBlend in="SourceGraphic" in2="fire" />
		</filter>
	</defs>
</svg>

@import "compass/css3"

@function randomNumber($min,$max)
	@return (random(100) / 100) * ($max - $min) + $min

*
	border: 0
	box-sizing: border-box
	margin: 0
	padding: 0
\:root
	--bg: #{hsl(223,10%,90%)}
	--fg: #{hsl(223,10%,10%)}
	font-size: calc(30px + (60 - 30) * (100vw - 320px) / (1280 - 320))
body, button
	font: 1em/1.5 -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, sans-serif
body
	background: var(--bg)
	color: var(--fg)
	height: 100vh
	display: grid
	place-items: center
.btn__text,
.effects
	position: absolute
	top: 0
	left: 0

$particles: 20
$particleSize: 0.5em

.btn
	$particleDelays: ()
	$filterID: "#fire"
	border-radius: 1.25em
	color: hsl(0,0%,100%)
	font-weight: bold
	-webkit-filter: url($filterID)
	filter: url($filterID)
	position: relative
	width: 2.5em
	height: 2.5em
	transition: transform 0.1s linear
	-webkit-apperance: none
	apperance: none
	&__p,
	&__text
		background: hsl(3,90%,55%)
		border-radius: 50%
		transition: background 0.15s linear
	&__p
		animation:
			duration: 1s
			timing-function: linear
			iteration-count: infinite
		pointer-events: none
		position: absolute
		width: $particleSize
		height: $particleSize
		@for $p from 1 through $particles
			$newDelay: 0s + randomNumber(-1,0)
			$particleDelays: append($particleDelays,$newDelay)
			&:nth-child(#{$p})
				animation-name: rise#{$p}
				animation-delay: $newDelay
				top: calc(50% - #{($particleSize / 2) + (0.9 * sin(($p / $particles) * pi()))})
				left: 2em * ($p / $particles)
	&__text
		display: block
		padding: 0.5em
		width: 100%
		height: 100%
		z-index: 1
	&:active
		transform: translateY(0.1em)
	&:focus &__p,
	&:focus &__text,
	&:hover &__p,
	&:hover &__text
		background: hsl(18,90%,55%)
	&:focus &__p,
	&:hover &__p
		animation-duration: 0.5s
		@for $d from 1 through length($particleDelays)
			&:nth-child(#{$d})
				animation-delay: nth($particleDelays,$d) / 2

/* Dark theme */
@media (prefers-color-scheme: dark)
	\:root
		--bg: #{hsl(223,10%,10%)}
		--fg: #{hsl(223,10%,90%)}

/* Animations */
@for $k from 1 through $particles
	$startX: 0em
	$midX: $startX + randomNumber(-0.1,0.1)
	$endX: $startX + randomNumber(-0.25,0.25)
	$endY: 1em * randomNumber(-3,-1)
	$midY: $endY / 2
	@keyframes rise#{$k}
		from
			transform: translate($startX,0) scale(1)
		50%
			transform: translate($midX,$midY) scale(1) 
		to
			transform: translate($endX,$endY) scale(0)