svelte-kit-vice/src/uix/eidos/components/combobox/combobox.css

[data-combobox] {
	display: inline-grid;
	gap: var(--space-2);
	inline-size: 100%;
	min-inline-size: 0;
	font-family: var(--font-ui);
	color: var(--color-content-primary);
}

[data-combobox-control],
[data-combobox-input],
[data-combobox-trigger],
[data-combobox-content] {
	--_combobox-accent-track: var(--color-primary-track);
	--_combobox-accent-border: var(--color-primary-border);
	--_combobox-accent-text: var(--color-primary-text);
}

[data-combobox-control][data-color='secondary'],
[data-combobox-input][data-color='secondary'],
[data-combobox-trigger][data-color='secondary'],
[data-combobox-content][data-color='secondary'] {
	--_combobox-accent-track: var(--color-secondary-track);
	--_combobox-accent-border: var(--color-secondary-border);
	--_combobox-accent-text: var(--color-secondary-text);
}

[data-combobox-control][data-color='neutral'],
[data-combobox-input][data-color='neutral'],
[data-combobox-trigger][data-color='neutral'],
[data-combobox-content][data-color='neutral'] {
	--_combobox-accent-track: var(--color-neutral-track);
	--_combobox-accent-border: var(--color-neutral-border);
	--_combobox-accent-text: var(--color-neutral-text);
}

[data-combobox-control][data-color='affirm'],
[data-combobox-input][data-color='affirm'],
[data-combobox-trigger][data-color='affirm'],
[data-combobox-content][data-color='affirm'] {
	--_combobox-accent-track: var(--color-affirm-track);
	--_combobox-accent-border: var(--color-affirm-border);
	--_combobox-accent-text: var(--color-affirm-text);
}

[data-combobox-control][data-color='fulfill'],
[data-combobox-input][data-color='fulfill'],
[data-combobox-trigger][data-color='fulfill'],
[data-combobox-content][data-color='fulfill'] {
	--_combobox-accent-track: var(--color-fulfill-track);
	--_combobox-accent-border: var(--color-fulfill-border);
	--_combobox-accent-text: var(--color-fulfill-text);
}

[data-combobox-control][data-color='risk'],
[data-combobox-input][data-color='risk'],
[data-combobox-trigger][data-color='risk'],
[data-combobox-content][data-color='risk'] {
	--_combobox-accent-track: var(--color-risk-track);
	--_combobox-accent-border: var(--color-risk-border);
	--_combobox-accent-text: var(--color-risk-text);
}

[data-combobox-control][data-color='threat'],
[data-combobox-input][data-color='threat'],
[data-combobox-trigger][data-color='threat'],
[data-combobox-content][data-color='threat'] {
	--_combobox-accent-track: var(--color-threat-track);
	--_combobox-accent-border: var(--color-threat-border);
	--_combobox-accent-text: var(--color-threat-text);
}

[data-combobox-control][data-color='loss'],
[data-combobox-input][data-color='loss'],
[data-combobox-trigger][data-color='loss'],
[data-combobox-content][data-color='loss'] {
	--_combobox-accent-track: var(--color-loss-track);
	--_combobox-accent-border: var(--color-loss-border);
	--_combobox-accent-text: var(--color-loss-text);
}

[data-combobox-control] {
	--_combobox-control-height: var(--control-height-md);
	--_combobox-control-px: var(--space-3);
	--_combobox-control-gap: var(--space-2);
	--_combobox-font-size: var(--font-size-sm);

	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--_combobox-control-gap);
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--_combobox-control-height);
	padding-inline: var(--_combobox-control-px);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-surface-default);
	box-shadow: var(--shadow-xs);
	color: var(--color-content-primary);
	font-size: var(--_combobox-font-size);
	line-height: var(--leading-ui);
	transition:
		background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

[data-combobox-control][data-size='sm'] {
	--_combobox-control-height: var(--control-height-sm);
	--_combobox-control-px: var(--space-2-5);
	--_combobox-control-gap: var(--space-1-5);
	--_combobox-font-size: var(--font-size-xs);
}

[data-combobox-control][data-size='lg'] {
	--_combobox-control-height: var(--control-height-lg);
	--_combobox-control-px: var(--space-3-5);
	--_combobox-control-gap: var(--space-2-5);
	--_combobox-font-size: var(--font-size-md);
}

[data-combobox-control][data-variant='outline'] {
	background: transparent;
	box-shadow: none;
}

[data-combobox-control][data-variant='ghost'] {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

[data-combobox-control]:has([data-combobox-input]:focus-visible),
[data-combobox-control]:has([data-combobox-trigger]:focus-visible),
[data-combobox-control]:has([data-state='open']) {
	border-color: var(--_combobox-accent-border);
	box-shadow:
		0 0 0 var(--focus-ring-offset) var(--color-surface-default),
		0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

[data-combobox-control]:has([data-disabled]),
[data-combobox][data-disabled] [data-combobox-control] {
	border-color: var(--color-border-subtle);
	background: var(--color-surface-raised);
	color: var(--color-content-disabled);
	box-shadow: none;
}

[data-combobox-input] {
	box-sizing: border-box;
	flex: 1 1 auto;
	inline-size: 100%;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: var(--leading-ui);
	outline: none;
}

[data-combobox-input]::placeholder {
	color: var(--color-content-muted);
}

[data-combobox-input]:disabled {
	color: var(--color-content-disabled);
	cursor: not-allowed;
}

[data-combobox-input]:not([data-combobox-control] [data-combobox-input]) {
	min-block-size: var(--control-height-md);
	padding-inline: var(--space-3);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-surface-default);
	box-shadow: var(--shadow-xs);
}

[data-combobox-trigger] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--control-height-xs);
	block-size: var(--control-height-xs);
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-content-secondary);
	font: inherit;
	cursor: pointer;
	outline: none;
	transition:
		background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

[data-combobox-trigger]:hover:not(:disabled):not([data-disabled]) {
	background: var(--color-surface-raised);
	color: var(--color-content-primary);
}

[data-combobox-trigger]:focus-visible {
	box-shadow:
		0 0 0 var(--focus-ring-offset) var(--color-surface-default),
		0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

[data-combobox-trigger][data-disabled],
[data-combobox-trigger]:disabled {
	color: var(--color-content-disabled);
	cursor: not-allowed;
}

[data-combobox-indicator] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--icon-size-sm);
	block-size: var(--icon-size-sm);
	color: currentColor;
	transition: transform var(--duration-fast) var(--ease-default);
}

[data-combobox-trigger][data-state='open'] [data-combobox-indicator] {
	transform: rotate(180deg);
	color: var(--_combobox-accent-text);
}

[data-floating-wrapper]:has(> [data-combobox-content]) {
	z-index: 80;
}

[data-combobox-content] {
	--_combobox-content-py: var(--space-1-5);
	--_combobox-content-px: var(--space-1-5);
	--_combobox-font-size: var(--font-size-sm);
	--_combobox-content-width: var(--_combobox-match-anchor-width, 14rem);

	box-sizing: border-box;
	inline-size: min(var(--_combobox-content-width), calc(100vw - var(--space-4)));
	min-inline-size: min(14rem, calc(100vw - var(--space-4)));
	max-inline-size: min(28rem, calc(100vw - var(--space-4)));
	max-block-size: min(22rem, var(--floating-available-height, 100dvh));
	padding: var(--_combobox-content-py) var(--_combobox-content-px);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-lg);
	background: var(--color-surface-overlay);
	box-shadow: var(--shadow-lg);
	color: var(--color-content-primary);
	font-family: var(--font-ui);
	font-size: var(--_combobox-font-size);
	line-height: var(--leading-ui);
	outline: none;
	transform-origin: var(--floating-transform-origin, center);
}

[data-combobox-content][data-size='sm'] {
	--_combobox-content-py: var(--space-1);
	--_combobox-content-px: var(--space-1);
	--_combobox-font-size: var(--font-size-xs);
}

[data-combobox-content][data-size='lg'] {
	--_combobox-content-py: var(--space-2);
	--_combobox-content-px: var(--space-2);
	--_combobox-font-size: var(--font-size-md);
}

[data-combobox-content][data-variant='outline'] {
	box-shadow: var(--shadow-md);
}

[data-combobox-content][data-variant='ghost'] {
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

[data-combobox-content][data-state='open'] {
	animation: combobox-content-in var(--duration-normal) var(--ease-out) both;
}

[data-combobox-content][data-state='closed'] {
	animation: combobox-content-out var(--duration-fast) var(--ease-default) both;
}

@keyframes combobox-content-in {
	from {
		opacity: 0;
		transform: translateY(-2px) scale(0.98);
	}
}

@keyframes combobox-content-out {
	to {
		opacity: 0;
		transform: translateY(-2px) scale(0.98);
	}
}

[data-combobox-viewport] {
	display: flex;
	flex-direction: column;
	gap: var(--space-0-5);
	max-block-size: calc(22rem - (var(--_combobox-content-py) * 2));
	overflow: auto;
	padding: var(--space-0-5);
}

[data-combobox-group] {
	display: flex;
	flex-direction: column;
	gap: var(--space-0-5);
	padding-block: var(--space-1);
}

[data-combobox-group-heading] {
	padding: var(--space-1) var(--space-2);
	color: var(--color-content-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

[data-combobox-separator] {
	block-size: var(--border-width);
	margin-block: var(--space-1);
	background: var(--color-border-subtle);
}

[data-combobox-item] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-inline-size: 0;
	min-block-size: var(--control-height-sm);
	padding-inline: var(--space-2);
	border-radius: var(--radius-md);
	color: var(--color-content-primary);
	cursor: pointer;
	outline: none;
	transition:
		background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

[data-combobox-item][data-highlighted] {
	background: var(--color-surface-raised);
	color: var(--color-content-primary);
}

[data-combobox-item][data-state='checked'] {
	background: var(--_combobox-accent-track);
	color: var(--_combobox-accent-text);
}

[data-combobox-item][data-disabled] {
	color: var(--color-content-disabled);
	cursor: not-allowed;
}

[data-combobox-item-indicator] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--icon-size-sm);
	block-size: var(--icon-size-sm);
	color: currentColor;
	opacity: 0;
	transform: scale(0.75);
	transition:
		opacity var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

[data-combobox-item][data-state='checked'] [data-combobox-item-indicator] {
	opacity: 1;
	transform: scale(1);
}

[data-combobox-arrow] svg {
	display: block;
	overflow: visible;
}

[data-combobox-arrow] polygon {
	fill: var(--color-surface-overlay);
	stroke: none;
}

[data-combobox-arrow] path {
	stroke: var(--color-border-default);
	stroke-width: var(--border-width);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
	[data-combobox-control],
	[data-combobox-trigger],
	[data-combobox-indicator],
	[data-combobox-content],
	[data-combobox-item],
	[data-combobox-item-indicator] {
		animation: none;
		transition: none;
	}
}