/* Shared list picker. */

.shd-list-picker {
	position: relative;
	width: 100%;
	min-width: 0;
}

.shd-list-picker__values {
	display: none !important;
}

.shd-list-picker__control {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	min-width: 0;
	min-height: var(--shd-input-h, 34px);
	border: 1px solid var(--shd-dialog-border, var(--ui-border, #4b5563));
	border-radius: var(--shd-dialog-radius-sm, 7px);
	background: var(--shd-dialog-surface, var(--ui-surface, #202020));
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
	transition:
		border-color 0.14s ease,
		background 0.14s ease,
		box-shadow 0.14s ease;
}

.shd-list-picker__control:focus-within {
	border-color: color-mix(in oklab, var(--shd-focus, #7aa2ff), transparent 35%);
	background: var(--shd-input-bg-focus, var(--ui-surface-hover, #292929));
}

.shd-list-picker__chips {
	display: flex;
	align-items: center;
	align-content: center;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 3px;
	min-width: 0;
	max-height: 72px;
	padding: 4px 5px;
	overflow: auto;
	scrollbar-width: thin;
}

.shd-list-picker__chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-width: 0;
	min-height: 22px;
	max-width: 100%;
	padding: 1px 3px 1px 6px;
	border: 1px solid var(--shd-dialog-border-soft, var(--ui-border, #4b5563));
	border-radius: 5px;
	background: var(--shd-dialog-surface-raised, var(--ui-surface-soft, #292929));
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
	font: 400 0.78rem/1.1 var(--shd-dialog-font-ui, inherit);
}

.shd-list-picker__chip > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shd-list-picker__remove,
.shd-list-picker__toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.shd-list-picker__remove {
	width: 22px;
	height: 22px;
	padding: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--shd-dialog-muted, var(--ui-text-dim, #a1a1aa));
}

.shd-list-picker__remove:hover,
.shd-list-picker__remove:focus-visible {
	outline: none;
	background: var(--shd-dialog-surface-hover, var(--ui-surface-hover, #353535));
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
}

.shd-list-picker__remove:focus-visible,
.shd-list-picker__toggle:focus-visible,
.shd-list-picker__option:focus-visible,
.shd-list-picker__search:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--shd-focus, #7aa2ff) 28%, transparent);
	outline: 0;
}

.shd-list-picker__remove .shd-svg-icon {
	--shd-icon-size: 10px;
	width: 10px;
	height: 10px;
}

.shd-list-picker__toggle {
	width: 36px;
	min-height: 36px;
	padding: 0;
	border-left: 1px solid var(--shd-dialog-border-soft, var(--ui-border, #4b5563));
	border-radius: 0 var(--shd-dialog-radius-sm, 7px) var(--shd-dialog-radius-sm, 7px) 0;
	background: transparent;
	color: var(--shd-dialog-muted, var(--ui-text-dim, #a1a1aa));
}

.shd-list-picker__toggle:hover {
	background: var(--shd-dialog-surface-hover, var(--ui-surface-hover, #353535));
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
}

.shd-list-picker__toggle .shd-svg-icon {
	--shd-icon-size: 17px;
	width: 17px;
	height: 17px;
}

.shd-list-picker__picker {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	box-sizing: border-box;
	width: min(100%, calc(100vw - 16px));
	height: min(360px, calc(100dvh - 32px));
	min-height: 0;
	padding: 4px;
	border: 1px solid var(--shd-dialog-border, var(--ui-border, #4b5563));
	border-radius: var(--shd-dialog-radius-sm, 7px);
	background: var(--shd-dialog-bg, var(--ui-surface, #202020));
	box-shadow: var(--ui-shadow, 0 18px 42px rgb(0 0 0 / 35%));
	overflow: hidden;
}

.shd-list-picker__search {
	box-sizing: border-box;
	width: 100%;
	height: 30px;
	min-height: 30px;
	margin: 0 0 4px;
	padding: 4px 7px;
	border: 1px solid var(--shd-dialog-border-soft, var(--ui-border, #4b5563));
	border-radius: var(--shd-dialog-radius-sm, 7px);
	background: var(--shd-input-bg, var(--ui-surface-soft, #292929));
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
	font: 400 0.82rem/1.2 var(--shd-dialog-font-ui, inherit);
}

.shd-list-picker__search::placeholder {
	color: var(--shd-dialog-muted, var(--ui-text-dim, #a1a1aa));
}

.shd-list-picker__list {
	display: grid;
	align-content: start;
	gap: 1px;
	min-height: 0;
	overflow: auto;
}

.shd-list-picker__group {
	display: grid;
	gap: 1px;
}

.shd-list-picker__group-label {
	padding: 5px 7px 3px;
	color: var(--shd-dialog-muted, var(--ui-text-dim, #a1a1aa));
	font: 600 0.72rem/1.1 var(--shd-dialog-font-ui, inherit);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.shd-list-picker__option {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: center;
	gap: 7px;
	box-sizing: border-box;
	min-height: 34px;
	margin: 0;
	padding: 5px 7px;
	border-radius: 5px;
	color: var(--shd-dialog-text, var(--ui-text, #f3f4f6));
	cursor: pointer;
	font: 400 0.82rem/1.2 var(--shd-dialog-font-ui, inherit);
}

.shd-list-picker__checkbox {
	pointer-events: none;
}

.shd-list-picker__option[aria-selected='true'] {
	background: color-mix(in srgb, var(--ui-accent, var(--shd-focus, #7aa2ff)) 12%, var(--shd-dialog-bg, #202020));
}

.shd-list-picker__option:not([aria-selected='true']):hover,
.shd-list-picker__option:not([aria-selected='true'])[data-active='true'] {
	background: var(--shd-dialog-surface-hover, var(--ui-surface-hover, #353535));
}

.shd-list-picker__option > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.shd-list-picker__picker {
		height: min(320px, calc(100dvh - 24px));
	}

	.shd-list-picker__chips {
		max-height: 60px;
	}
}