/* ==========================================================================
   Status Selector & Selectable List
   ========================================================================== */

.note-status-options {
	max-height: 350px;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	background: var(--background-primary);
	box-shadow: var(--shadow-s);
	padding: var(--size-2-2);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.note-status-options::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

.note-status-options::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-bg);
	border-radius: var(--radius-s);
}

.note-status-option {
	align-items: stretch;
}

.note-status-option .selectable-list-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.note-status-option__icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--size-2-1);
	border-radius: var(--radius-s);
	border: 1px solid var(--background-modifier-border);
	background: var(--background-primary-alt);
	min-width: 32px;
	height: 32px;
	transition: all var(--anim-duration-fast) ease;
	box-shadow: var(--shadow-s);
}

.note-status-option:hover .note-status-option__icon-wrapper,
.note-status-option[data-focused="true"] .note-status-option__icon-wrapper {
	border-color: var(--interactive-accent);
	background: var(--background-primary);
	transform: scale(1.05);
}

.note-status-option[data-selected="true"] .note-status-option__icon-wrapper {
	border-color: var(--interactive-accent);
	background: var(--background-primary);
	box-shadow: 0 0 0 1px var(--interactive-accent) inset;
}

.note-status-option__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.note-status-option__name {
	font-weight: var(--font-medium);
	color: var(--text-normal);
}

.note-status-option__description {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.note-status-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2-2);
	min-height: 32px;
	align-items: center;
	padding: var(--size-2-1) 0;
}

.status-selector-empty {
	padding: var(--size-4-2);
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	border: 1px dashed var(--background-modifier-border);
	border-radius: var(--radius-m);
	background: var(--background-primary-alt);
}

/* Selectable List Item (shared across components) */
.selectable-list-item {
	display: flex;
	align-items: center;
	gap: var(--size-2-3);
	padding: var(--size-2-2) var(--size-4-1);
	cursor: pointer;
	border-bottom: none;
	border-radius: var(--radius-s);
	transition: all var(--anim-duration-fast) ease;
}

.selectable-list-item:hover {
	background: var(--background-modifier-hover);
}

.selectable-list-item[data-focused="true"] {
	outline: none;
	background: var(--background-modifier-hover);
	box-shadow: inset 0 0 0 1px var(--interactive-accent);
}

.selectable-list-item[data-selected="true"] {
	background: var(--background-modifier-active-hover);
	box-shadow: var(--shadow-s);
}

.selectable-list-item-icon {
	font-size: 16px;
	min-width: 20px;
}

.selectable-list-item-content {
	flex: 1;
	font-size: var(--font-ui-small);
}

.selectable-list-item-check {
	color: var(--interactive-accent);
	display: flex;
	align-items: center;
}