diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 13a65e411f..78c3c29c0c 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -15,9 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@focusin.passive.stop="() => {}"
 >
 	<div
-		ref="itemsEl"
-		v-hotkey="keymap"
-		tabindex="0"
 		class="_popup _shadow"
 		:class="$style.menu"
 		:style="{
@@ -27,147 +24,156 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.stop="() => {}"
 		@contextmenu.self.prevent="() => {}"
 	>
-		<template v-for="item in (items2 ?? [])">
-			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-				<span style="opacity: 0.7;">{{ item.text }}</span>
+		<slot name="header"></slot>
+		<div
+			ref="itemsEl"
+			v-hotkey="keymap"
+			tabindex="0"
+			:class="$style.menuItems"
+		>
+			<template v-for="item in (items2 ?? [])">
+				<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+				<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+					<span style="opacity: 0.7;">{{ item.text }}</span>
+				</span>
+				<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+					<span><MkEllipsis/></span>
+				</span>
+				<MkA
+					v-else-if="item.type === 'link'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:to="item.to"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</MkA>
+				<a
+					v-else-if="item.type === 'a'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:href="item.href"
+					:target="item.target"
+					:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+					:download="item.download"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</a>
+				<button
+					v-else-if="item.type === 'user'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, { [$style.active]: item.active }]"
+					@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+					<div v-if="item.indicate" :class="$style.item_content">
+						<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'switch'"
+					role="menuitemcheckbox"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:disabled="unref(item.disabled)"
+					@click.prevent="switchItem(item)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+					<div :class="$style.item_content">
+						<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+						<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'radio'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+					:disabled="unref(item.disabled)"
+					@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+					@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+					@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'radioOption'"
+					role="menuitemradio"
+					tabindex="0"
+					:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+					@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<div :class="$style.icon">
+						<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+					</div>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'parent'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+					@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+					@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+					@click.prevent="!preferClick ? null : showChildren(item, $event)"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+					</div>
+				</button>
+				<button
+					v-else role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+					@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</button>
+			</template>
+			<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
+				<span>{{ i18n.ts.none }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA
-				v-else-if="item.type === 'link'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:to="item.to"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</MkA>
-			<a
-				v-else-if="item.type === 'a'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:href="item.href"
-				:target="item.target"
-				:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-				:download="item.download"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</a>
-			<button
-				v-else-if="item.type === 'user'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.active]: item.active }]"
-				@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-				<div v-if="item.indicate" :class="$style.item_content">
-					<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'switch'"
-				role="menuitemcheckbox"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:disabled="unref(item.disabled)"
-				@click.prevent="switchItem(item)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				<div :class="$style.item_content">
-					<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-					<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radio'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				:disabled="unref(item.disabled)"
-				@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radioOption'"
-				role="menuitemradio"
-				tabindex="0"
-				:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<div :class="$style.icon">
-					<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-				</div>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'parent'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-				@click.prevent="!preferClick ? null : showChildren(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-		</template>
-		<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
-			<span>{{ i18n.ts.none }}</span>
-		</span>
+		</div>
+		<slot name="footer"></slot>
 	</div>
 	<div v-if="childMenu">
 		<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
@@ -429,7 +435,7 @@ onBeforeUnmount(() => {
 .root {
 	&.center {
 		> .menu {
-			> .item {
+			.item {
 				text-align: center;
 			}
 		}
@@ -439,7 +445,7 @@ onBeforeUnmount(() => {
 		> .menu {
 			min-width: 230px;
 
-			> .item {
+			.item {
 				padding: 6px 20px;
 				font-size: 0.95em;
 				line-height: 24px;
@@ -452,36 +458,38 @@ onBeforeUnmount(() => {
 		margin: auto;
 
 		> .menu {
-			padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 			width: 100%;
 			border-radius: 24px;
 			border-bottom-right-radius: 0;
 			border-bottom-left-radius: 0;
 
-			> .item {
-				font-size: 1em;
-				padding: 12px 24px;
+			> .menuItems {
+				padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 
-				&::before {
-					width: calc(100% - 24px);
-					border-radius: 12px;
+				> .item {
+					font-size: 1em;
+					padding: 12px 24px;
+
+					&::before {
+						width: calc(100% - 24px);
+						border-radius: 12px;
+					}
+
+					> .icon {
+						margin-right: 14px;
+						width: 24px;
+					}
 				}
 
-				> .icon {
-					margin-right: 14px;
-					width: 24px;
+				> .divider {
+					margin: 12px 0;
 				}
 			}
-
-			> .divider {
-				margin: 12px 0;
-			}
 		}
 	}
 }
 
 .menu {
-	padding: 8px 0;
 	box-sizing: border-box;
 	max-width: 100vw;
 	min-width: 200px;
@@ -493,6 +501,11 @@ onBeforeUnmount(() => {
 	}
 }
 
+.menuItems {
+	padding: 8px 0;
+	box-sizing: border-box;
+}
+
 .item {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/components/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
index 4dbdeeab1c..ab92776c7f 100644
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -4,57 +4,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()">
-	<div class="_popup _shadow" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
-		<div :class="$style.textCountRoot">
-			<div :class="$style.textCountLabel">{{ i18n.ts.textCount }}</div>
-			<div
-				:class="[$style.textCount,
-					{ [$style.danger]: textCountPercentage > 100 },
-					{ [$style.warning]: textCountPercentage > 90 && textCountPercentage <= 100 },
-				]"
-			>
-				<div :class="$style.textCountGraph"></div>
-				<div><span :class="$style.textCountCurrent">{{ number(textLength) }}</span> / {{ number(maxTextLength) }}</div>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()">
+	<MkMenu
+		:items="menuDef"
+		:align="align"
+		:width="width"
+		:maxHeight="maxHeight"
+		:asDrawer="type === 'drawer'"
+	>
+		<template #header>
+			<div :class="[$style.textCountRoot, { [$style.asDrawer]: type === 'drawer' }]">
+				<div :class="$style.textCountLabel">{{ i18n.ts.textCount }}</div>
+				<div
+					:class="[$style.textCount,
+						{ [$style.danger]: textCountPercentage > 100 },
+						{ [$style.warning]: textCountPercentage > 90 && textCountPercentage <= 100 },
+					]"
+				>
+					<div :class="$style.textCountGraph"></div>
+					<div><span :class="$style.textCountCurrent">{{ number(textLength) }}</span> / {{ number(maxTextLength) }}</div>
+				</div>
 			</div>
-		</div>
-		<div :class="$style.menuRoot">
-			<button
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				@click.prevent="toggleReactionAcceptance"
-			>
-				<i
-					class="ti-fw"
-					:class="[$style.icon, {
-						'ti ti-heart': props.currentReactionAcceptance === 'likeOnly',
-						[$style.danger]: props.currentReactionAcceptance === 'likeOnly',
-						'ti ti-heart-plus': props.currentReactionAcceptance === 'likeOnlyForRemote',
-						'ti ti-icons': props.currentReactionAcceptance == null || !['likeOnly', 'likeOnlyForRemote'].includes(props.currentReactionAcceptance),
-					}]"
-				></i>
-				<div :class="$style.menuItem_content">
-					<span :class="$style.menuItem_content_text">{{ i18n.ts.reactionAcceptance }}</span>
-				</div>
-			</button>
-			<div role="separator" tabindex="-1" :class="$style.divider"></div>
-			<button
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.danger]"
-				@click.prevent="reset"
-			>
-				<i
-					class="ti-fw ti ti-trash"
-					:class="$style.icon"
-				></i>
-				<div :class="$style.menuItem_content">
-					<span :class="$style.menuItem_content_text">{{ i18n.ts.reset }}</span>
-				</div>
-			</button>
-		</div>
-	</div>
+		</template>
+	</MkMenu>
 </MkModal>
 </template>
 
@@ -62,6 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef, computed, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
+import MkMenu from '@/components/MkMenu.vue';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
@@ -75,6 +48,8 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
 const props = defineProps<{
 	currentReactionAcceptance: Misskey.entities.Note['reactionAcceptance'];
 	textLength: number;
+	align?: 'center' | string;
+	width?: number;
 	src?: HTMLElement;
 }>();
 
@@ -154,48 +129,14 @@ async function reset() {
 </script>
 
 <style lang="scss" module>
-.root {
-	min-width: 200px;
-
-	&.asDrawer {
-		width: 100%;
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-
-		.textCountRoot {
-			padding: 12px 24px;
-		}
-
-		.menuRoot {
-			padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
-
-			> .item {
-				font-size: 1em;
-				padding: 12px 24px;
-
-				&::before {
-					width: calc(100% - 24px);
-					border-radius: 12px;
-				}
-
-				> .icon {
-					margin-right: 14px;
-					width: 24px;
-				}
-			}
-
-			> .divider {
-				margin: 12px 0;
-			}
-		}
-	}
-}
-
 .textCountRoot {
 	--textCountBg: color-mix(in srgb, var(--MI_THEME-panel), var(--MI_THEME-fg) 15%);
 	background-color: var(--textCountBg);
 	padding: 10px 14px;
+
+	&.asDrawer {
+		padding: 12px 24px;
+	}
 }
 
 .textCountLabel {
@@ -248,109 +189,4 @@ async function reset() {
 		font-size: 18px;
 	}
 }
-
-.menuRoot {
-	padding: 8px 0;
-
-	> .item {
-		display: flex;
-		align-items: center;
-		position: relative;
-		padding: 5px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: left;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-decoration: none !important;
-		color: var(--menuFg, var(--MI_THEME-fg));
-
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: -1;
-			top: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			width: calc(100% - 16px);
-			height: 100%;
-			border-radius: 6px;
-		}
-
-		&:focus-visible {
-			outline: none;
-
-			&:not(:hover):not(:active)::before {
-				outline: var(--MI_THEME-focus) solid 2px;
-				outline-offset: -2px;
-			}
-		}
-
-		&:hover,
-		&:focus-visible:active,
-		&:focus-visible.active {
-			color: var(--menuHoverFg, var(--MI_THEME-accent));
-
-			&::before {
-				background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
-			}
-		}
-
-		&:not(:focus-visible):active,
-		&:not(:focus-visible).active {
-			color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
-
-			&::before {
-				background-color: var(--menuActiveBg, var(--MI_THEME-accent));
-			}
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
-
-		&.danger {
-			--menuFg: #ff2a2a;
-			--menuHoverFg: #fff;
-			--menuHoverBg: #ff4242;
-			--menuActiveFg: #fff;
-			--menuActiveBg: #d42e2e;
-		}
-
-		.icon {
-			margin-right: 8px;
-			line-height: 1;
-		}
-
-		.icon.danger {
-			color: var(--MI_THEME-error);
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--MI_THEME-divider);
-	}
-}
-
-.menuItem_content {
-	width: 100%;
-	max-width: 100vw;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	text-overflow: ellipsis;
-}
-
-.menuItem_content_text {
-	max-width: calc(100vw - 4rem);
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
 </style>