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

Core React components for the NEXT Design System.

import { createClasses } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import "../Avatar/Avatar.js";
import { staticClasses as staticClasses$1 } from "../Avatar/Avatar.styles.js";
const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
  root: {
    display: "flex",
    [`& .${staticClasses$1.root}`]: {
      border: `2px solid ${theme.colors.bgPage}`,
      boxSizing: "content-box"
    },
    [`& .${staticClasses$1.container}`]: {
      padding: 2
    }
  },
  row: {
    flexDirection: "row",
    justifyContent: "flex-start",
    [`& .${staticClasses$1.container}`]: {
      "&:not(:first-of-type)": {
        marginLeft: "var(--spacing)"
      }
    },
    "&$toBack": {
      flexDirection: "row-reverse",
      justifyContent: "flex-end",
      [`& .${staticClasses$1.container}`]: {
        "&:last-of-type": {
          marginLeft: 0
        },
        "&:not(:last-of-type)": {
          marginLeft: "var(--spacing)"
        }
      }
    }
  },
  column: {
    flexDirection: "column",
    [`& .${staticClasses$1.container}`]: {
      "&:not(:first-of-type)": {
        marginTop: "var(--spacing)"
      }
    },
    "&$toBack": {
      flexDirection: "column-reverse",
      [`& .${staticClasses$1.container}`]: {
        "&:last-of-type": {
          marginTop: 0
        },
        "&:not(:last-of-type)": {
          marginTop: "var(--spacing)"
        }
      }
    }
  },
  highlight: {
    [`& .${staticClasses$1.container}:hover`]: {
      zIndex: theme.zIndices.popover
    }
  },
  toBack: {}
});
export {
  staticClasses,
  useClasses
};