import r from "styled-components";
import { getSpacing as t, getFontSize as i, convertToTransientProps as d, getColorAlias as o } from "../../../../utils/index.js";
const s = r.div.withConfig({
  shouldForwardProp: d(["type", "variant"])
})`
  display: flex;
  height: 100%;
  padding-inline: ${t("s02")};
  align-items: ${({ variant: e }) => e === "multi-line" ? "flex-start" : "center"};

  justify-content: center;

  div {
    margin: 0;
  }

  & > svg,
  & > div > svg {
    ${({ type: e }) => e === "illustration" ? i("size24") : i("size14")};
  }

  img {
    object-fit: cover;
    height: ${t("s07")};
    width: ${t("s07")};
    border-radius: ${(e) => e.type === "avatar" ? e.theme.radius.roundedE : e.theme.radius.roundedB};
  }
`, u = r.div.withConfig({
  shouldForwardProp: d(["type"])
})`
  height: ${t("s07")};
  width: ${t("s07")};
  border-radius: ${(e) => e.type === "avatar" ? e.theme.radius.roundedE : e.theme.radius.roundedB};
  background-color: ${o("contentSubdued")};
`;
export {
  u as ImagePlaceholder,
  s as ListItemPrefixWrapper
};
