.triggerContainer {
	display: contents;

	> * {
		anchor-name: var(--menu-anchor);
	}
}

.popover {
	position: fixed;
	position-area: block-end span-inline-end;
	margin: var(--s-2) 0;
	outline: none;
	border-radius: var(--radius-box);
	background-color: var(--color-bg-high);
	border: var(--border-style);
	width: max-content;
	max-width: calc(100vw - var(--s-4));
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	padding: var(--s-2);
	color: var(--color-text);

	&[data-placement="bottom end"],
	&[data-placement="bottom right"] {
		position-area: block-end span-inline-start;
	}
}

.opensLeft {
	position-area: block-end span-inline-start;
}

.scrolling {
	max-height: 300px !important;
	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-text-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);
}