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

UI Kit Core React components.

import { staticClasses as staticClasses$1 } from "../Avatar/Avatar.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/AvatarGroup/AvatarGroup.styles.tsx
var { 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",
		"&>*:not(:first-of-type)": { marginLeft: "var(--spacing)" },
		"&$toBack": {
			flexDirection: "row-reverse",
			justifyContent: "flex-end",
			"&>*": {
				"&:last-of-type": { marginLeft: 0 },
				"&:not(:last-of-type)": { marginLeft: "var(--spacing)" }
			}
		}
	},
	column: {
		flexDirection: "column",
		"&>*:not(:first-of-type)": { marginTop: "var(--spacing)" },
		"&$toBack": {
			flexDirection: "column-reverse",
			"&>*": {
				"&:last-of-type": { marginTop: 0 },
				"&:not(:last-of-type)": { marginTop: "var(--spacing)" }
			}
		}
	},
	highlight: { "&>*:hover": { zIndex: theme.zIndices.popover } },
	toBack: {}
});
//#endregion
export { staticClasses, useClasses };