.triggerContainer {
	display: contents;
}

.popover {
	position: absolute;
	margin: 0;
	outline: none;
	border-radius: var(--radius-box);
	background-color: var(--color-bg-high);
	border: var(--border-style);
	width: max-content;
	max-width: var(--floating-available-width, 100vw);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	padding: var(--s-2);
	color: var(--color-text);
}

.scrolling {
	max-height: min(300px, var(--floating-available-height, 100vh));
	overflow-y: auto;
}

.itemsContainer {
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);

	&:focus-visible {
		outline: none;
	}
}

.item {
	display: flex;
	align-items: center;
	font-weight: var(--weight-bold);
	font-size: var(--font-xs);
	color: var(--color-text);
	white-space: nowrap;
	gap: var(--s-2);
	border-radius: var(--radius-field);
	padding: var(--s-1-5) var(--s-3);
	background-color: var(--color-bg-high);
	width: 100%;
	border: 0;
	outline: none;
	justify-content: flex-start;
	transition: background-color 0.15s;
	cursor: pointer;

	&:hover,
	&:focus {
		background-color: var(--color-bg-higher);
	}
}

.itemDisabled {
	color: var(--color-text-high);
	cursor: not-allowed;
}

.itemActive {
	color: var(--color-fg-accent);
}

.itemDestructive {
	color: var(--color-error);
}

.itemIcon {
	width: 18px;

	& svg {
		width: 100%;
	}
}

.itemImg {
	min-width: 20px;
	min-height: 20px;
}

.menuHeader {
	font-size: var(--font-2xs);
	color: var(--color-text-high);
	padding: var(--s-1) var(--s-3);
	font-weight: var(--weight-semi);
}