.content {
	min-width: 100px;
	border: var(--component-border-width-sm) solid var(--stroke-subtle);
	border-radius: var(--component-radii-md);
	padding: var(--component-spacing-xs);
	box-shadow: var(--elevation-medium);
	overflow-y: auto;
	max-height: clamp(50vh, 25vh, 80vh);
	z-index: 1001;
}

.item {
	color: var(--color-neutral-surface-ghost-idle-fg-default);
	position: relative;
	font: var(--font-label-sm);
	padding: var(--component-spacing-sm);
	padding-left: calc(var(--component-spacing-xs) * 2 + var(--size-100));
	border-radius: var(--component-radii-sm);
	cursor: default;

	/* ensure checkbox/radio items render icon + label on one line */
	display: flex;
	align-items: center;
	gap: var(--component-spacing-xs);
	white-space: nowrap;
}

.item:hover:not([data-disabled]),
	.item:focus:not([data-disabled]) {
		outline: none;
		background-color: var(--color-neutral-surface-ghost-active-bg);
		color: var(--color-neutral-surface-ghost-hover-fg-default);
		cursor: pointer;
	}

.item[data-disabled] {
		color: var(--color-neutral-surface-ghost-idle-fg-subtle);
	}

.regularItem {
	color: var(--color-neutral-surface-ghost-idle-fg-default);
	position: relative;
	font: var(--font-label-sm);
	padding: var(--component-spacing-sm);
	border-radius: var(--component-radii-sm);
	cursor: default;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: var(--component-spacing-xs);
	white-space: nowrap;
}

.regularItem:hover:not([data-disabled]),
	.regularItem:focus:not([data-disabled]) {
		outline: none;
		background-color: var(--color-neutral-surface-ghost-active-bg);
		color: var(--color-neutral-surface-ghost-hover-fg-default);
		cursor: pointer;
	}

.regularItem[data-disabled] {
		color: var(--color-neutral-surface-ghost-idle-fg-subtle);
	}

.itemIndicator {
	position: absolute;
	left: var(--component-spacing-xs);
	display: grid;
	place-items: center;
	width: var(--size-100);
	height: var(--size-100);
}

.separator {
	height: var(--component-border-width-md);
	background-color: var(--stroke-subtle);
	margin-top: var(--component-spacing-xs);
	margin-bottom: var(--component-spacing-xs);
	margin-left: calc(-1 * var(--component-spacing-xs));
	margin-right: calc(-1 * var(--component-spacing-xs));
}

.trailingVisual {
	flex-grow: 1;
	color: var(--color-neutral-canvas-default-fg-subtle);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	line-height: 0;
}

.trailingVisual[data-disabled] {
	color: var(--color-neutral-canvas-default-fg-subtle);
}

.leadingVisual {
	color: var(--color-neutral-canvas-default-fg-subtle);
	display: flex;
	align-items: center;
	line-height: 0;
}

/* ensure SVGs do not reserve baseline/descent space */

.leadingVisual > svg,
.trailingVisual > svg {
	display: block;
}

.leadingVisual[data-disabled] {
	color: var(--color-neutral-canvas-default-fg-subtle);
}

.label {
	font: var(--font-label-xs);
	color: var(--color-neutral-canvas-default-fg-subtle);
	padding: var(--component-spacing-sm) var(--component-spacing-sm) var(--component-spacing-xs);
	cursor: default;
}

.arrow {
	fill: var(--color-neutral-canvas-default-bg);
}

.contentRoomy {
	min-width: 300px;
	max-height: calc(100dvh - 96px);
	overflow-y: auto;
}

/* narrower default for submenus */

.subContentNarrow {
	min-width: 220px;
}