/*
 * Design System - AELITA
 * components/dealer-status.css - the .a-dealer-status opening-hours indicator.
 *
 * Compact status line for autosalon cards: a small state dot + text. Consumes
 * tokens.css only: no hex values, no !important, no `transition: all`.
 *
 * Server renders a neutral placeholder (dot + one reserved line, no state
 * colour). The JavaScript controller sets data-dealer-status and fills the
 * text, so an HTML-cached page never shows a stale status. The reserved line
 * height (min-height) prevents any layout shift when the text arrives.
 *
 * States:
 *   open    - success green dot + green state word;
 *   closed  - neutral grey dot, secondary text;
 *   unknown - neutral grey dot, secondary text.
 * The label always carries the meaning, so the state is readable without
 * colour (accessibility).
 */

.a-dealer-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	/* Reserve exactly one --fs-small line so filling the text causes no CLS. */
	min-height: calc(var(--fs-small) * 1.45);
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--text-secondary);
}

/* Decorative dot only. */
.a-dealer-status__dot {
	flex: 0 0 auto;
	width: var(--space-2);
	height: var(--space-2);
	border-radius: 50%;
	background-color: var(--c-ink-300);
}

.a-dealer-status__state {
	font-weight: var(--fw-semibold);
}

/* The separator and the detail share one visibility switch. */
.a-dealer-status__sep,
.a-dealer-status__detail {
	display: none;
}

.a-dealer-status[data-has-detail="1"] .a-dealer-status__sep,
.a-dealer-status[data-has-detail="1"] .a-dealer-status__detail {
	display: inline;
}

.a-dealer-status__detail {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Fallback shown only when JavaScript is unavailable. */
.a-dealer-status__static {
	color: var(--text-secondary);
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */
.a-dealer-status[data-dealer-status="open"] .a-dealer-status__dot {
	background-color: var(--status-success);
}

.a-dealer-status[data-dealer-status="open"] .a-dealer-status__state {
	color: var(--status-success);
}

.a-dealer-status[data-dealer-status="closed"] .a-dealer-status__dot,
.a-dealer-status[data-dealer-status="unknown"] .a-dealer-status__dot {
	background-color: var(--c-ink-300);
}

.a-dealer-status[data-dealer-status="closed"] .a-dealer-status__state,
.a-dealer-status[data-dealer-status="unknown"] .a-dealer-status__state {
	color: var(--text-secondary);
}