[data-date-picker] {
	--_date-field-height: var(--date-field-height-md);
	--_date-field-px: var(--date-field-px-md);
	--_date-field-gap: var(--date-field-gap-md);
	--_date-field-segment-px: var(--date-field-segment-px-md);
	--_date-field-font-size: var(--date-field-font-size-md);
	--_date-field-accent-border: var(--color-primary-border);
	--_date-field-accent-track: var(--color-primary-track);
	--_date-field-accent-text: var(--color-primary-text);

	display: inline-flex;
	flex-direction: column;
	gap: var(--date-field-stack-gap);
	inline-size: 100%;
	min-inline-size: 0;
	color: var(--date-field-color);
	font-family: var(--date-field-font-family);
	font-size: var(--_date-field-font-size);
	line-height: var(--date-field-line-height);
}

[data-date-picker][data-size='sm'] {
	--_date-field-height: var(--date-field-height-sm);
	--_date-field-px: var(--date-field-px-sm);
	--_date-field-gap: var(--date-field-gap-sm);
	--_date-field-segment-px: var(--date-field-segment-px-sm);
	--_date-field-font-size: var(--date-field-font-size-sm);
}

[data-date-picker][data-size='lg'] {
	--_date-field-height: var(--date-field-height-lg);
	--_date-field-px: var(--date-field-px-lg);
	--_date-field-gap: var(--date-field-gap-lg);
	--_date-field-segment-px: var(--date-field-segment-px-lg);
	--_date-field-font-size: var(--date-field-font-size-lg);
}

[data-date-picker][data-color='secondary'] {
	--_date-field-accent-border: var(--color-secondary-border);
	--_date-field-accent-track: var(--color-secondary-track);
	--_date-field-accent-text: var(--color-secondary-text);
}

[data-date-picker][data-color='neutral'] {
	--_date-field-accent-border: var(--color-neutral-border);
	--_date-field-accent-track: var(--color-neutral-track);
	--_date-field-accent-text: var(--color-neutral-text);
}

[data-date-picker][data-color='affirm'] {
	--_date-field-accent-border: var(--color-affirm-border);
	--_date-field-accent-track: var(--color-affirm-track);
	--_date-field-accent-text: var(--color-affirm-text);
}

[data-date-picker][data-color='fulfill'] {
	--_date-field-accent-border: var(--color-fulfill-border);
	--_date-field-accent-track: var(--color-fulfill-track);
	--_date-field-accent-text: var(--color-fulfill-text);
}

[data-date-picker][data-color='risk'] {
	--_date-field-accent-border: var(--color-risk-border);
	--_date-field-accent-track: var(--color-risk-track);
	--_date-field-accent-text: var(--color-risk-text);
}

[data-date-picker][data-color='threat'] {
	--_date-field-accent-border: var(--color-threat-border);
	--_date-field-accent-track: var(--color-threat-track);
	--_date-field-accent-text: var(--color-threat-text);
}

[data-date-picker][data-color='loss'] {
	--_date-field-accent-border: var(--color-loss-border);
	--_date-field-accent-track: var(--color-loss-track);
	--_date-field-accent-text: var(--color-loss-text);
}

[data-date-picker][data-variant='outline'] [data-date-field-input] {
	background: transparent;
}

[data-date-picker][data-variant='ghost'] [data-date-field-input] {
	border-color: transparent;
	background: transparent;
	padding-inline: 0;
}

[data-date-picker][data-invalid] [data-date-field-input] {
	border-color: var(--date-field-border-invalid);
}

[data-date-picker][data-disabled] {
	opacity: var(--date-field-disabled-opacity);
}

[data-date-picker-trigger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--_date-field-height);
	block-size: var(--_date-field-height);
	padding: 0;
	border: var(--date-field-border-width) solid var(--date-field-border);
	border-radius: var(--date-field-radius);
	background: var(--date-field-bg);
	color: inherit;
	cursor: pointer;
	transition:
		background var(--date-field-transition-duration) var(--date-field-transition-ease),
		border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
		box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease),
		color var(--date-field-transition-duration) var(--date-field-transition-ease);
}

[data-date-picker-trigger]:hover {
	border-color: var(--_date-field-accent-border);
	background: var(--_date-field-accent-track);
	color: var(--_date-field-accent-text);
}

[data-date-picker-trigger]:focus-visible {
	outline: none;
	border-color: var(--_date-field-accent-border);
	box-shadow: var(--date-field-focus-shadow);
}

[data-date-picker-trigger][data-disabled],
[data-date-picker-trigger]:disabled {
	cursor: not-allowed;
	opacity: var(--date-field-disabled-opacity);
}

/* ── Trigger embedded inside the input ──────────────────────────────────────
 * When the consumer places <DatePicker.Trigger /> as a descendant of
 * <DatePicker.Input>, the icon becomes a flush affordance at the input's
 * trailing edge: no border, no separate background, smaller hit area sized
 * to the segment height, and a subtle hover tint that doesn't compete with
 * the field's focus ring. The standalone treatment above stays available
 * for consumers who place the trigger as a sibling. */

[data-date-field-input] [data-date-picker-trigger] {
	flex: 0 0 auto;
	inline-size: var(--date-field-segment-height);
	block-size: var(--date-field-segment-height);
	margin-inline-start: auto;
	padding: 0;
	border: none;
	border-radius: var(--date-field-segment-radius);
	background: transparent;
	color: var(--date-field-segment-color);
	box-shadow: none;
}

[data-date-field-input] [data-date-picker-trigger]:hover {
	border: none;
	background: var(--_date-field-accent-track);
	color: var(--_date-field-accent-text);
}

[data-date-field-input] [data-date-picker-trigger]:focus-visible {
	outline: none;
	border: none;
	background: var(--_date-field-accent-track);
	color: var(--_date-field-accent-text);
	box-shadow: var(--date-field-segment-focus-shadow);
}

[data-popover-content]:has([data-date-picker-calendar]) {
	--_popover-content-width-override: max-content;
	--_popover-content-min-width-override: max-content;
	--_popover-content-max-width-override: calc(100vw - var(--space-4));
}

[data-date-picker-calendar][data-calendar] {
	padding: 0;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

[data-date-picker-calendar][data-calendar][data-invalid] {
	border-color: transparent;
}

/* ── Footer (Clear / Cancel / Close action row) ──────────────────────────── */

[data-date-picker-footer] {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-block-start: var(--space-3);
	margin-block-start: var(--space-3);
	border-block-start: var(--border-width) solid var(--color-border-subtle);
}

[data-date-picker-clear],
[data-date-picker-cancel] {
	margin-inline-end: auto;
}

[data-date-picker-clear],
[data-date-picker-cancel],
[data-date-picker-close] {
	inline-size: max-content;
	min-block-size: var(--control-height-sm);
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	border: var(--border-width) solid transparent;
	background: transparent;
	color: var(--color-content-primary);
	font: inherit;
	font-size: var(--font-size-sm);
	line-height: var(--leading-ui);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

[data-date-picker-clear]:hover,
[data-date-picker-cancel]:hover {
	background: var(--color-surface-overlay);
}

[data-date-picker-close] {
	border-color: var(--color-primary-border);
	background: var(--color-primary-solid);
	color: var(--color-content-on-solid);
}

[data-date-picker-close]:hover {
	background: var(--color-primary-solid-hover);
}

[data-date-picker-clear]:focus-visible,
[data-date-picker-cancel]:focus-visible,
[data-date-picker-close]:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-primary-border);
	outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
	[data-date-picker-trigger] {
		transition: none;
	}
	[data-date-picker-clear],
	[data-date-picker-cancel],
	[data-date-picker-close] {
		transition: none;
	}
}