/**
 * Status Line (tw-status-line) — dot + label status badge, no clock.
 * Adapted from tw-studio-clocks' "Mode B" (status line). The dot's fill, glow and
 * blink are pure CSS; per-control overrides target real properties (editor-safe).
 */

.tw-status-line {
	width: 100%;
}

/* inline-flex so the badge flows to the wrapper's text-align (the alignment control). */
.tw-sl__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--e-global-typography-accent-font-family, 'Inter', sans-serif);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--e-global-color-eda52f2, #86837c);
	font-variant-numeric: tabular-nums;
}

.tw-sl__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	color: var(--e-global-color-accent, #B18051); /* dot_color overrides this */
	background: currentColor;                      /* fill from currentColor */
	box-shadow: 0 0 10px currentColor;             /* dot_glow overrides the blur radius */
	animation: tw-sl-blink 2.4s ease infinite;     /* dot_blink_speed overrides the duration */
}

.tw-sl--nodot .tw-sl__dot {
	display: none;
}

.tw-sl--noblink .tw-sl__dot {
	animation: none;
}

@keyframes tw-sl-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

/* Reduced motion: only the decorative dot blink stops (the dot stays visible). */
@media (prefers-reduced-motion: reduce) {
	.tw-sl__dot {
		animation: none;
	}
}