/**
 * Per-slot countdown badge — student-facing quiz player overlay.
 *
 * Tokens only — no hardcoded hex, px sizes, or font-family values.
 * All values reference --lrn-* CSS custom properties defined in
 * learnomy/assets/css/learnomy.css.
 *
 * @package Learnomy_Pro\Extensions\Advanced_Quizzes
 */

/* ── Badge container ─────────────────────────────────────────────────────── */

.lrn-quiz-slot-timer-badge {
	position: absolute;
	top: var(--lrn-space-2, 0.5rem);
	right: var(--lrn-space-2, 0.5rem);
	display: inline-flex;
	align-items: center;
	gap: var(--lrn-space-1, 0.25rem);
	padding: var(--lrn-space-1, 0.25rem) var(--lrn-space-2, 0.5rem);
	background: var(--lrn-bg-secondary, #f7f7f5);
	color: var(--lrn-text-secondary, #6b6b6b);
	border: 1px solid var(--lrn-border, rgba(55, 53, 47, 0.09));
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ensure the question wrap has a positioning context. */
.lrn-quiz__question-wrap {
	position: relative;
}

/* ── Timer label ─────────────────────────────────────────────────────────── */

.lrn-quiz-slot-timer-badge__label {
	/* Screen-reader-friendly label included in flow but visually compact. */
}

/* ── Time readout ────────────────────────────────────────────────────────── */

.lrn-quiz-slot-timer-badge__time {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ── Warning state (< 10 seconds remaining) ─────────────────────────────── */

.lrn-quiz-slot-timer-badge--warning {
	background: var(--lrn-warn-bg, rgba(217, 119, 6, 0.08));
	color: var(--lrn-warn, #d97706);
	border-color: var(--lrn-warn, #d97706);
}

/* Dark mode — tokens reassigned on .lrn-dark body by Free's learnomy.css. */
.lrn-dark .lrn-quiz-slot-timer-badge {
	background: var(--lrn-bg-secondary, #2a2a2a);
	color: var(--lrn-text-secondary, #a0a0a0);
	border-color: var(--lrn-border, rgba(255, 255, 255, 0.1));
}

.lrn-dark .lrn-quiz-slot-timer-badge--warning {
	background: var(--lrn-warn-bg, rgba(217, 119, 6, 0.15));
	color: var(--lrn-warn, #e09000);
	border-color: var(--lrn-warn, #e09000);
}