@mantine/core/esm/components/Popover/Popover.styles.js

React components library focused on usability, accessibility and developer experience

import { createMemoStyles } from '../../theme/create-memo-styles.js';
import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';

var useStyles = createMemoStyles({
  title: {},
  root: {
    position: "relative",
    display: "inline-block"
  },
  wrapper: {
    background: "transparent",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: "none"
  },
  popover: ({ theme, radius }) => ({
    position: "absolute",
    background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
    pointerEvents: "all",
    borderRadius: getSizeValue({ size: radius, sizes: theme.radius })
  }),
  arrow: ({ theme }) => ({
    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
    background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
    zIndex: 1
  }),
  body: ({ theme, radius, shadow }) => ({
    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
    boxShadow: shadow in theme.shadows ? theme.shadows[shadow] : shadow,
    borderRadius: getSizeValue({ size: radius, sizes: theme.radius })
  }),
  inner: ({ theme, spacing }) => ({
    padding: getSizeValue({ size: spacing, sizes: theme.spacing })
  }),
  header: ({ theme, spacing }) => ({
    borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[2]}`,
    padding: [theme.spacing.xs / 1.5, getSizeValue({ size: spacing, sizes: theme.spacing })],
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  }),
  target: {
    zIndex: 1
  },
  close: {
    position: "absolute",
    top: 7,
    zIndex: 2,
    right: 10
  }
});

export default useStyles;
//# sourceMappingURL=Popover.styles.js.map