/* Front end styles */
.wp-block-jetpack-event-countdown {
	text-align: center;
	position: relative;

	.event-countdown__counter {
		text-transform: uppercase;
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 16px;
		font-weight: 600;
	}

	.event-countdown__counter span {
		margin: 0 1em;
		display: inline-flex;
		align-items: center;
	}

	.event-countdown__counter span strong {
		margin-right: 8px;
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 24px;
	}

	.event-countdown__day {
		line-height: 1;
		font-weight: 900; /* stylelint-disable-line scales/font-weights */
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 56px;
		display: block;
	}

	.event-countdown__hour,
	.event-countdown__minute,
	.event-countdown__second {
		min-width: 1.5em; // A min-width means 2 digit numbers don't cause too much resizing.
		text-align: right;
	}

	.event-countdown__counter p,
	.event-countdown__event-title p {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	// It's time!
	.event-countdown__counter.event-countdown__counter-stopped p,
	.event-countdown__counter.event-countdown__counter-stopped span,
	.event-countdown__counter.event-countdown__counter-stopped strong {
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 100%;
		display: inline;
	}

	.event-countdown__counter-stopped + .event-countdown__event-title {
		position: absolute;
		left: 1em;
		right: 1em;
		top: 25%;
	}

	.event-countdown__event-title {
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		font-size: 36px;
	}
}

// Font size beyond mobile.
@media only screen and (min-width: 600px) {
	.wp-block-jetpack-event-countdown {
		.event-countdown__counter span strong {
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			font-size: 36px;
		}

		.event-countdown__day {
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			font-size: 96px;
		}

		.event-countdown__event-title {
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			font-size: 48px;
		}
	}
}


/* Hidden timestamp used by the script to extract the event time. */
.event-countdown__date {
	display: none;
}


/**
 * Fireworks
 */

$ecf_color1: #fff922;
$ecf_color2: #685fd7;
$ecf_color3: #ecfec7;
$ecf_color4: #a3fdec;
$ecf_color5: #feb352;
$ecf_color6: #b82806;

// Contain the fireworks, so they never cause scrollbars to appear.
.event-countdown__fireworks {
	position: relative;
	overflow: hidden;
	z-index: -1;
	padding-top: 50%; // Make responsive.

	> .event-countdown__fireworks-before,
	> .event-countdown__fireworks-after {
		will-change: transform;
		position: absolute;
		top: 0;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		animation: 1s event_countdown_bang ease-out infinite backwards, 1s event_countdown_gravity ease-in infinite backwards, 5s event_countdown_position linear infinite backwards;
		mix-blend-mode: overlay;
		box-shadow:
			-120px -218.66667px $ecf_color1,
			248px -16.66667px $ecf_color3,
			190px 16.33333px $ecf_color1,
			-113px -308.66667px $ecf_color5,
			-109px -287.66667px $ecf_color6,
			-50px -313.66667px $ecf_color5,
			226px -31.66667px $ecf_color5,
			180px -351.66667px $ecf_color5,
			-12px -338.66667px $ecf_color3,
			220px -388.66667px $ecf_color3,
			-69px -27.66667px $ecf_color5,
			-111px -339.66667px $ecf_color1,
			155px -237.66667px $ecf_color2,
			-152px -380.66667px $ecf_color2,
			-50px -37.66667px $ecf_color2,
			-95px -175.66667px $ecf_color3,
			-88px 10.33333px $ecf_color1,
			112px -309.66667px $ecf_color1,
			69px -415.66667px $ecf_color5,
			168px -100.66667px $ecf_color5,
			-244px 24.33333px $ecf_color6,
			97px -325.66667px $ecf_color5,
			-211px -182.66667px $ecf_color3,
			236px -126.66667px $ecf_color4,
			140px -196.66667px $ecf_color1,
			125px -175.66667px $ecf_color2,
			118px -381.66667px $ecf_color5,
			144px -111.66667px $ecf_color6,
			36px -78.66667px $ecf_color4,
			-63px -196.66667px $ecf_color2,
			-218px -227.66667px $ecf_color3,
			-134px -377.66667px $ecf_color4,
			-36px -412.66667px $ecf_color4,
			209px -106.66667px $ecf_color3,
			91px -278.66667px $ecf_color1,
			-22px -191.66667px $ecf_color3,
			139px -392.66667px $ecf_color3,
			56px -2.66667px $ecf_color1,
			-156px -276.66667px $ecf_color5,
			-163px -233.66667px $ecf_color3,
			-238px -346.66667px $ecf_color3,
			62px -363.66667px $ecf_color1,
			244px -170.66667px $ecf_color1,
			224px -142.66667px $ecf_color2,
			141px -208.66667px $ecf_color2,
			211px -285.66667px $ecf_color5,
			181px -128.66667px $ecf_color1,
			90px -123.66667px $ecf_color2,
			189px 70.33333px $ecf_color3,
			-18px -383.66667px $ecf_color3,
			100px -6.66667px $ecf_color5;
	}

	> .event-countdown__fireworks-after {
		animation-delay: 1.25s, 1.25s, 1.25s;
		animation-duration: 1.25s, 1.25s, 6.25s;
	}
}

@keyframes event_countdown_bang {
	from {
		box-shadow: 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white), 0 0 var(--studio-white);
	}
}

@keyframes event_countdown_gravity {
	to {
		transform: translateY(200px);
		-webkit-transform: translateY(200px);
		opacity: 0;
	}
}

@keyframes event_countdown_position {
	0%,
	19.9% {
		margin-top: 10%;
		margin-left: 40%;
	}

	20%,
	39.9% {
		margin-top: 40%;
		margin-left: 30%;
	}

	40%,
	59.9% {
		margin-top: 20%;
		margin-left: 70%;
	}

	60%,
	79.9% {
		margin-top: 30%;
		margin-left: 20%;
	}

	80%,
	99.9% {
		margin-top: 30%;
		margin-left: 80%;
	}
}