/* Dashboard field controls: the searchable picker and the locked-field upsell. */

.combo {
	position: relative;
	display: block;
	inline-size: 100%;
}

.combo-input {
	padding-inline-end: 32px;
}

/* Reads as a dropdown, because it replaces one. */
.combo::after {
	content: "";
	position: absolute;
	inset-inline-end: 13px;
	inset-block-start: 15px;
	inline-size: 7px;
	block-size: 7px;
	border-inline-end: 2px solid var(--text-faint);
	border-block-end: 2px solid var(--text-faint);
	rotate: 45deg;
	pointer-events: none;
}

.combo-list {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 6px);
	z-index: 40;
	margin: 0;
	padding: 5px;
	list-style: none;
	max-block-size: 264px;
	overflow-y: auto;
	background-color: var(--panel);
	background-image: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.combo-option {
	padding-block: 7px;
	padding-inline: 10px;
	border-radius: var(--radius-sm);
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: var(--dur);
	transition-timing-function: var(--ease-out);
}

.combo-option:hover {
	background-color: var(--panel-hover);
	color: var(--text);
}

.combo-option.is-active {
	background-color: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent-glow);
	color: var(--text);
}

.combo-empty {
	padding-block: 8px;
	padding-inline: 10px;
	color: var(--text-faint);
	font-size: 13px;
	list-style: none;
}

/* The switch beside it is disabled and cannot be tabbed to, so this chip is a real
   button and has to shed the browser's own button styling. */
.chip-lock {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
}

.chip-lock:hover {
	border-color: color-mix(in srgb, var(--premium) 60%, transparent);
	background-color: color-mix(in srgb, var(--premium) 20%, transparent);
}

.chip-lock:focus-visible {
	outline: 2px solid var(--premium);
	outline-offset: 2px;
}

.locked-upsell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-start: 4px;
	padding-block: 10px;
	padding-inline: 12px;
	border: 1px solid color-mix(in srgb, var(--premium) 32%, transparent);
	border-radius: var(--radius-sm);
	background-color: color-mix(in srgb, var(--premium) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.combo-option { transition: none; }
}