/*
 * TimeRangeField recipe — layout only.
 *
 * The chrome of each endpoint input is painted by `time-field.css`
 * because:
 *
 *   1. The eidos `<TimeRangeField>` root overlays `data-time-field=""`
 *      on top of `data-time-range-field`, so the existing
 *      `[data-time-field] { --_*: … }` token setup, size cascades,
 *      variant cascades and color tokens all apply inside the range.
 *
 *   2. soma's `<TimeRangeField.Input>` overlays `data-time-field-input`
 *      on each endpoint container (the runtime composes both markers
 *      on the same element). So `[data-time-field-input]` chrome rules
 *      paint each endpoint exactly like a standalone TimeField.
 *
 * Same trick `DateRangeField` uses with `data-date-field`. This recipe
 * only adds the range-specific layout:
 *
 *   - Label sits above the inputs, spans the full row
 *   - Two inputs side-by-side via grid (1fr · auto · 1fr)
 *   - Em-dash separator in the middle grid cell
 *   - `data-endpoint='start'` / `data-endpoint='end'` available for
 *     consumer-side tinting; the default recipe leaves it inert.
 *
 *   [data-time-range-field]       → grid wrapper (also data-time-field)
 *   [data-time-range-field-label] → label, spans the full row
 *   [data-time-range-field-input] → endpoint container
 *                                   (also data-time-field-input)
 */

/*
 * Specificity bump (0, 2, 0) so we beat `[data-time-field]`'s base
 * rule from `time-field.css` — that rule sets
 * `display: inline-flex; flex-direction: column;` which would stack
 * the inputs instead of placing them on a 1fr · auto · 1fr grid.
 * The eidos wrapper overlays both markers on the same element; this
 * recipe makes the grid layout deterministic regardless of CSS
 * import order.
 */
[data-time-range-field][data-time-field] {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--time-range-field-row-gap, var(--space-3));
	row-gap: var(--time-field-stack-gap, var(--space-1-5));
	align-items: center;
	inline-size: 100%;
	min-inline-size: 0;
}

[data-time-range-field-label] {
	grid-column: 1 / -1;
	grid-row: 1;
	font-family: var(--time-field-label-font-family, var(--style-label-font-family));
	font-size: var(--time-field-label-font-size, var(--font-size-sm));
	font-weight: var(--time-field-label-font-weight, 500);
	color: var(--time-field-label-color, var(--color-content-primary));
}

[data-time-range-field-input] {
	grid-row: 2;
	min-inline-size: 0;
}

[data-time-range-field-input][data-endpoint='start'] {
	grid-column: 1;
}

[data-time-range-field-input][data-endpoint='end'] {
	grid-column: 3;
}

/* Em-dash separator between the two inputs. Anchored to the grid's
 * middle column / second row. */
[data-time-range-field]:has(
		[data-time-range-field-input][data-endpoint='start']
	):has([data-time-range-field-input][data-endpoint='end'])::before {
	content: var(--time-range-field-separator-glyph, '—');
	grid-column: 2;
	grid-row: 2;
	color: var(--time-range-field-separator-color, var(--color-content-muted));
	font-family: var(--style-label-font-family, var(--font-ui));
	font-size: 0.9em; /* literal: separator scales with the field font-size */
	user-select: none;
	pointer-events: none;
}

[data-time-range-field][data-disabled] {
	opacity: var(--time-field-disabled-opacity, 0.55);
	pointer-events: none;
}