@hitachivantara/uikit-react-core/dist/esm/ListContainer/ListItem/ListItem.styles.js

Core React components for the NEXT Design System.

import { createClasses } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { outlineStyles } from "../../utils/focusUtils.js";
const { staticClasses, useClasses } = createClasses("HvListItem", {
  root: {
    ...theme.typography.body,
    padding: 0,
    display: "block",
    height: "32px",
    lineHeight: "32px",
    listStyleType: "none",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    position: "relative",
    alignContent: "center",
    "&:not(:last-child)": {
      marginBottom: "8px"
    },
    "&$condensed": {
      marginBottom: 0
    },
    "&.HvIsFocused": {
      ...outlineStyles,
      backgroundColor: theme.colors.bgPageSecondary,
      zIndex: 2
    }
  },
  focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
  gutters: {
    padding: `0 ${theme.space.xs}`,
    ":has($startAdornment)": {
      paddingLeft: 0
    },
    ":has($endAdornment)": {
      paddingRight: 0
    }
  },
  condensed: {},
  interactive: {
    cursor: "pointer",
    "&:not($disabled):not($selected):hover": {
      backgroundColor: theme.colors.bgHover
    },
    "&$disabled": {
      cursor: "not-allowed"
    }
  },
  selected: { backgroundColor: theme.colors.bgHover },
  disabled: {
    color: theme.colors.textDisabled,
    backgroundColor: theme.colors.bgDisabled
  },
  startAdornment: {
    float: "left"
  },
  endAdornment: {
    float: "right"
  },
  /** @deprecated use `:has($startAdornment)` instead */
  withStartAdornment: {},
  /** @deprecated use `:has($endAdornment)` instead */
  withEndAdornment: {}
});
export {
  staticClasses,
  useClasses
};