@hitachivantara/uikit-react-core/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const focusUtils = require("../../../utils/focusUtils.cjs");
const item = {
  border: "none",
  cursor: "pointer",
  padding: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`,
  height: "100%",
  display: "flex",
  alignItems: "center",
  "&:active": {
    outline: "none"
  },
  "&:focus": {
    outline: "none"
  },
  "&:focus-visible": {
    ...focusUtils.outlineStyles
  },
  "& span": {
    display: "inline-flex",
    color: "inherit",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  },
  "& span::after": {
    content: "attr(data-text)",
    height: 0,
    visibility: "hidden",
    overflow: "hidden",
    userSelect: "none",
    pointerEvents: "none",
    fontWeight: uikitStyles.theme.fontWeights.semibold,
    "@media speech": {
      display: "none"
    }
  }
};
const { staticClasses, useClasses } = uikitReactUtils.createClasses(
  "HvHeader-MenuItem",
  {
    root: {
      display: "inline",
      height: "100%",
      borderBottom: "4px solid transparent",
      ":hover, :focus-within": {
        backgroundColor: uikitStyles.theme.colors.bgHover
      }
    },
    menu: {},
    menubar: {},
    selected: {
      color: uikitStyles.theme.colors.text,
      borderColor: "currentcolor"
    },
    item,
    link: {
      textDecoration: "none"
    },
    button: {
      color: "inherit"
    }
  }
);
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;