@zeix/ui-element/docs-src/components/form-combobox/form-combobox.css

UIElement - a HTML-first library for reactive Web Components

form-combobox {
	width: 100%;

	& label,
	& p,
	& button {
		opacity: var(--opacity-dimmed);
		transition: opacity var(--transition-short) var(--easing-inout);
	}

	& label {
		display: block;
		font-size: var(--font-size-s);
		color: var(--color-text);
		margin-bottom: var(--space-xxs);
	}

	& input {
		display: inline-block;
		box-sizing: border-box;
		background: var(--color-input);
		color: var(--color-text);
		border: none;
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-xs) var(--input-height) var(--space-xs)
			var(--space-xxs);
		font-size: var(--font-size-m);
		height: var(--input-height);
		width: 100%;
		transition: color var(--transition-short) var(--easing-inout);

		&[aria-invalid="true"] {
			box-shadow: 0 0 var(--space-xxs) 2px var(--color-error-invalid);
		}

		&::placeholder {
			color: var(--color-text);
			opacity: var(--opacity-translucent);
		}
	}

	.input {
		position: relative;
	}

	.clear {
		position: absolute;
		bottom: 0;
		right: 0;
		border: 0;
		border-radius: 50%;
		font-size: var(--font-size-xs);
		line-height: var(--line-height-xs);
		color: var(--color-input);
		background-color: var(--color-text-soft);
		width: calc(0.6 * var(--input-height));
		height: calc(0.6 * var(--input-height));
		margin: calc(0.2 * var(--input-height));
		padding: 0;

		&:hover {
			background-color: var(--color-text);
		}
	}

	[role="listbox"] {
		position: absolute;
		gap: 0;
		list-style: none;
		top: 100%;
		left: 0;
		width: calc(100% - 2px);
		padding: 0;
		margin: 0;
		background: var(--color-secondary);
		border: 1px solid var(--color-border);
		border-top: none;
		z-index: 1;

		[role="option"] {
			margin: 0;
			padding: var(--space-xs) var(--space-s);
			font-size: var(--font-size-s);
			line-height: var(--line-height-s);
			color: var(--color-text);
			cursor: pointer;
			transition: background var(--transition-short) var(--easing-inout);

			&[aria-selected="true"] {
				background: var(--color-primary);
				color: var(--color-text-inverted);
			}

			&:hover {
				background: var(--color-secondary-hover);

				&[aria-selected="true"] {
					background: var(--color-primary-hover);
				}
			}
		}
	}

	.error,
	.description {
		margin: var(--space-xs) 0 0;
		font-size: var(--font-size-xs);
		line-height: var(--line-height-s);

		&:empty {
			display: none;
		}
	}

	.error {
		color: color-mix(in srgb, var(--color-text) 50%, var(--color-error));
	}

	.description {
		color: var(--color-text-soft);
	}

	&:focus-within {
		& label,
		& p,
		& button {
			opacity: var(--opacity-solid);
		}

		& input {
			color: var(--color-text);
		}
	}
}