@octopusdeploy/design-system-components/dist/src/components/MenuItems/menuItemStyles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.menuItemStyles = exports.menuItemClasses = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
exports.menuItemClasses = {
    root: "MuiMenuItem-root",
};
exports.menuItemStyles = (0, css_1.css)({
    [`&.${exports.menuItemClasses.root}`]: {
        color: design_system_tokens_1.themeTokens.color.text.primary,
        backgroundColor: design_system_tokens_1.themeTokens.color.menuList.background.default,
        font: design_system_tokens_1.text.body.regular.large,
        wordBreak: "break-all",
        whiteSpace: "normal",
        textAlign: "left",
        [`&.${exports.menuItemClasses.root}`]: {
            "&:hover": {
                color: design_system_tokens_1.themeTokens.color.text.primary,
                backgroundColor: design_system_tokens_1.themeTokens.color.menuList.background.hover,
            },
            "&:focus": {
                color: design_system_tokens_1.themeTokens.color.text.primary,
                backgroundColor: design_system_tokens_1.themeTokens.color.menuList.background.active,
            },
        },
    },
});