.popover {
	border-radius: var(--radius-box);
	background-color: var(--color-bg-high);
	border: var(--border-style);
	width: max-content;
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	padding: var(--s-2);
}

.popoverOpensLeft {
	right: 0;
}

.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;
}

.item[data-focused] {
	background-color: var(--color-bg-higher);
}

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

.itemSelected {
	background-color: var(--color-text-accent);
	font-weight: var(--weight-extra);
}

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

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

.itemIcon {
	width: 18px;
}

.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);
}