/** Component tokens **/

.menuitem_4EEri {
    --color-menuitem-icon: var(--sp-color-icon-menu-default);
    --color-menuitem-icon-hover: var(--sp-color-icon-menu-hover);
    --color-menuitem-icon-active: var(--sp-color-icon-menu-active);

    --color-menuitem-text: var(--sp-color-text-menu-default);
    --color-menuitem-text-hover: var(--sp-color-text-menu-hover);
    --color-menuitem-text-active: var(--sp-color-text-menu-active);
    --color-menuitem-text-disabled: var(--sp-color-text-menu-disabled);

    --color-menuitem-surface: var(--sp-color-bg-menu-default);
    --color-menuitem-surface-hover: var(--sp-color-bg-menu-hover);
    --color-menuitem-surface-active: var(--sp-color-bg-menu-active);
}

.theme-color-dark .menuitem_4EEri {
    --color-menuitem-text: var(--sp-color-text-menu-dark-default);
    --color-menuitem-text-hover: var(--sp-color-text-menu-dark-hover);
    --color-menuitem-text-active: var(--sp-color-text-menu-dark-active);
    --color-menuitem-text-disabled: var(--sp-color-text-menu-dark-disabled);
    --color-menuitem-surface: var(--sp-color-bg-menu-dark-default);
    --color-menuitem-surface-hover: var(--sp-color-bg-menu-dark-hover);
    --color-menuitem-surface-active: var(--sp-color-bg-menu-dark-active);
}

/** End component tokens **/

.menuitem_4EEri {
    background-color: var(--color-menuitem-surface);
    justify-content: flex-start;
}

.label_kEhEF {
    color: var(--color-menuitem-text);
    margin: 0;
    margin-right: auto;
}

.leadingIcon_JrIhQ {
    color: var(--color-menuitem-icon-active);
}

.trailingIcon_vT1Vh {
    color: var(--color-menuitem-icon);
}

.menuitem_4EEri:focus-visible {
    outline-color: var(--color-menuitem-text);
}

.menuitem_4EEri:hover {
    background-color: var(--color-menuitem-surface-hover);
}

.menuitem_4EEri:hover .label_kEhEF {
    color: var(--color-menuitem-text-hover);
}

.menuitem_4EEri:hover .trailingIcon_vT1Vh {
    color: var(--color-menuitem-icon-hover);
}

:is(.active_wdOfq, .active_wdOfq:hover),
:is(.active_wdOfq, .active_wdOfq:hover) :is(.label_kEhEF, .leadingIcon_JrIhQ, .trailingIcon_vT1Vh) {
    background-color: var(--color-menuitem-surface-active);
    color: var(--color-menuitem-text-active);
}

:is(.disabled_00v1N, .disabled_00v1N:hover),
:is(.disabled_00v1N, .disabled_00v1N:hover) :is(.label_kEhEF, .leadingIcon_JrIhQ, .trailingIcon_vT1Vh) {
    color: var(--color-menuitem-text-disabled);
}