import e from "styled-components";
import { getCardVariant as t, getCardInteractiveStyles as i } from "./utils.js";
import { getSpacing as a } from "../../utils/index.js";
const n = e.div`
  display: flex;
  flex-direction: column;
  border-radius: ${(d) => d.theme.radius.roundedC};
  box-shadow: ${(d) => d.theme.elevation.e1};
  ${t};
  ${i}
`;
n.displayName = "Card";
const r = e.div`
  display: flex;
  flex-direction: column;
  padding: ${a("s04", "s05")};
  width: 100%;
`;
r.displayName = "CardContent";
const o = e.div`
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: ${a("s05", "s05", "s04")};
  width: 100%;

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
`;
o.displayName = "CardHeader";
const s = e.div`
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  padding: ${a("s04", "s05", "s05")};
  width: 100%;
`;
s.displayName = "CardActions";
export {
  n as Card,
  s as CardActions,
  r as CardContent,
  o as CardHeader
};
