import o, { css as a } from "styled-components";
import { getSpacing as i, getColorAlias as n, getFontSize as r } from "../../utils/index.js";
import { mapTypeToCss as l } from "./utils.js";
const g = o.div`
  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  padding: ${(t) => t.componentName === "notification" ? i("s04") : i("s04", "s06")};
  border-radius: ${(t) => t.componentName === "notification" && t.theme.radius.roundedC};
  ${(t) => l(t.variant, s)};
  position: relative;
`, p = o.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-top: ${i("s04")};
  margin-right: ${({ compact: t, showClose: e }) => t && e && i("s08")};
  width: 100%;

  & > button + button {
    margin-left: ${i("s02")};
  }
`, m = o.div`
  display: flex;
  flex-flow: ${(t) => t.compact ? "row" : "column"} nowrap;
  width: 100%;

  ${(t) => t.compact && a`
      ${p} {
        margin-top: 0;
      }
    `}
`, s = o.div`
  align-items: center;
  display: flex;
  height: 28px;
  margin-right: ${i("s04")};

  svg {
    fill: ${n("contentDefault")};
    height: 20px;
    width: 20px;
  }
`, h = o.div`
  position: absolute;
  right: 16px;
  top: ${({ compact: t }) => t ? "8px" : "4px"};
`, x = o.h4`
  ${r("size20")};
  color: ${n("contentDefault")};
  font-weight: ${(t) => t.theme.font.weightExtrabold};
  margin: 0;
  padding: 0;
  width: 100%;
`, w = o.div`
  color: ${n("contentDefault")};
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  min-height: 24px;
  padding-top: 4px;
  width: 100%;
`;
export {
  p as Actions,
  h as CloseIcon,
  m as Container,
  w as Content,
  s as IconWrapper,
  x as Title,
  g as Wrapper
};
