/**
 * ROOX Countdown
 *
 * Every component selector starts with .roox-countdown (see the slides.css header for
 * why). The block / inline layout is a prefix class on the widget wrapper
 * (.roox-countdown--label-block / -inline), present in the served HTML.
 */

.roox-countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

.roox-countdown .roox-countdown__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

/* A display on the element beats the hidden attribute, so say it explicitly. */
.roox-countdown [hidden] {
	display: none !important;
}

.roox-countdown .roox-countdown__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 20px;
	background-color: var(--e-global-color-primary, #333);
	color: #fff;
}

.roox-countdown .roox-countdown__digits {
	display: block;
	color: inherit;
	font-size: clamp(2rem, 6vw, 4.3rem);
	font-variant-numeric: tabular-nums; /* every digit the same width: nothing jitters each second */
	font-weight: 700;
	line-height: 1;
}

.roox-countdown .roox-countdown__label {
	display: block;
	margin-top: .6em;
	color: inherit;
	font-size: clamp(.75rem, 1.4vw, 1.1rem);
	line-height: 1;
}

/* Inline: the label sits beside the number and the boxes only take the room they need. */
.roox-countdown--label-inline .roox-countdown .roox-countdown__items {
	width: auto;
}

.roox-countdown--label-inline .roox-countdown .roox-countdown__item {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: baseline;
	gap: .4em;
}

.roox-countdown--label-inline .roox-countdown .roox-countdown__label {
	margin-top: 0;
}

.roox-countdown .roox-countdown__message {
	width: 100%;
	text-align: center;
}