/**
 * Stylesheet: CountdownScroller
 * Author: Marisa1980
 * Description: Import and display CSS for CountdownScroller.js
 * Other: This stylesheet can not run on mobile site
**/

/* Main container */
.countdown-scroller {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

/* Time block */
.countdown-scroller__time-block {
	display: flex;
}
	
/* Time block for day */
.countdown-scroller__time-block.day {
	display: flex;
}

/* Day separator */
.countdown-scroller__separator.day-separator {
	display: inline-block;
}

/* Digit style */
.countdown-scroller__digit {
	overflow: hidden;
}

/* Digit strip style */
.countdown-scroller__digit-strip {
	height: 1em;
}

.countdown-scroller__digit-strip div {
	height: 1em;
	line-height: 1em;
	text-align: center;
}

/* Time separator for default symbol */
.countdown-scroller__separator {
	display: inline-block;
	line-height: 1em;
}

/* Time separator for time text */
.countdown-scroller__label {
	padding: 4px;
}

/* Display complete message */
.countdown-scroller__complete-message {
	opacity: 0;
	animation: countdownMessageFadeIn 0.5s ease-in forwards;
}
	
@keyframes countdownMessageFadeIn {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

/* Display progress bar */
.countdown-scroller__progress {
	position: absolute;
	top: -5px;
	left: 0;
	width: -webkit-fill-available;
	height: 5px;
	background: rgba(var(--theme-accent-color--rgb), .7);
	border: 1px solid var(--theme-accent-color);
	border-radius: 100vmax;
	overflow: hidden;
	z-index: 1;
}

.countdown-scroller__progress-bar {
	height: 100%;
	width: 0;
	background: var(--theme-body-background-color);
	transition: width .1s ease;
}