@cgi-learning-hub/ui/dist/components/ResourceCard/style.es.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import { styled as o, Card as a, Box as i, CardMedia as p, CardContent as n } from "@mui/material";
const c = o(a)(({ selected: e, size: r, theme: t }) => ({
  boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
  borderRadius: "0.5rem",
  height: "auto",
  border: "2px solid transparent",
  transition: "border-color 0.2s ease-in-out",
  position: "relative",
  ...r === "sm" && {
    display: "flex",
    width: "100%"
  },
  ...e && {
    borderColor: t.palette.primary.light
  },
  "&:hover": {
    "& .MuiBox-root.selected-icon": {
      opacity: 1,
      visibility: "visible"
    }
  }
})), m = o(i)(({ selected: e, hasNoButtonOnFocus: r, theme: t }) => ({
  position: "absolute",
  top: 0,
  right: 0,
  width: "2rem",
  height: "2rem",
  background: "common.white",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  padding: ".8rem",
  borderRadius: ".5rem",
  visibility: "visible",
  opacity: 0,
  cursor: "pointer",
  transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
  ...e && {
    background: t.palette.primary.lighter,
    opacity: 1,
    visibility: "visible"
  },
  ...r ? {
    "&:hover": {
      background: t.palette.primary.lighter,
      opacity: 1
    }
  } : {
    "&:hover, &:focus": {
      background: t.palette.primary.lighter,
      opacity: 1
    }
  },
  "& .MuiSvgIcon-root": {
    color: t.palette.primary.main
  }
})), d = o(p)(({ size: e, image: r, defaultImage: t }) => ({
  height: e == "sm" ? 85 : 180,
  width: e == "sm" ? 85 : "calc(100% - 2rem)",
  objectFit: "cover",
  margin: e == "sm" ? "0 10px" : "1rem",
  borderRadius: "0.5rem",
  ...!r && e === "md" && {
    backgroundImage: `url(${t})`,
    backgroundRepeat: "repeat",
    backgroundSize: "20% 20%",
    backgroundPosition: "center",
    opacity: "0.7"
  }
})), l = o(n)(({ size: e }) => ({
  padding: e == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
  width: e === "sm" ? "calc(100% - 110px)" : "100%"
})), g = o(i)(
  ({ size: e }) => ({
    display: "flex",
    alignItems: "center",
    marginTop: "0.5rem",
    ...e === "sm" && {
      svg: {
        width: ".8em",
        height: ".8em"
      }
    }
  })
), x = o(i)(({ size: e, width: r, isLast: t }) => ({
  marginLeft: e === "sm" ? ".3rem" : ".5rem",
  fontSize: e === "sm" ? "12px" : "15px",
  "& .MuiTypography-root": {
    paddingTop: "2px",
    fontSize: e === "sm" ? "12px" : "15px"
  },
  ...t && !r && {
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    overflow: "hidden",
    maxWidth: e === "sm" ? "110px" : "172px"
  }
})), h = o(i)(
  ({ size: e }) => ({
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    width: "fit-content",
    height: "fit-content",
    ...e === "sm" && {
      svg: {
        width: ".8em",
        height: ".8em"
      }
    }
  })
), u = o(i)(
  ({ size: e }) => ({
    position: "absolute",
    bottom: e === "sm" ? ".65rem" : "16px",
    right: e === "sm" ? "8px" : "16px",
    display: "flex",
    gap: ".2rem"
  })
);
export {
  u as PublicIconWrapper,
  l as ResourceCardBody,
  d as ResourceCardImage,
  h as ResourceIconItem,
  g as ResourcePropertyItem,
  x as ResourcePropertyText,
  m as SelectedIcon,
  c as StyledCard
};