import e from "styled-components";
import { getSpacing as t, getColorAlias as i, getFontSize as r } from "../../../utils/index.js";
import { getBorderColor as n, getIconFill as s } from "./utils.js";
const a = e.div`
  display: flex;
  font-family: ${(o) => o.theme.font.familyPrimary};
  flex-direction: column;
  margin-bottom: ${t("s01")};
  padding: ${t("s04")};
  border-radius: ${t("s02")};
  background-color: ${i("containerInverse")};
  position: relative;
  overflow: hidden;
  min-width: 300px;
  max-width: 100%;
  pointer-events: auto;
  ${r("size14")};

  &::before {
    content: '';
    height: 100%;
    width: ${t("s01")};
    background-color: ${({ variant: o }) => o && n(o)};
    position: absolute;
    top: 0;
    left: 0;
  }

  svg {
    margin-right: ${t("s04")};
    height: calc(${t("s05")} - ${t("s01")});
    width: calc(${t("s05")} - ${t("s01")});
    fill: ${({ variant: o }) => o ? s(o) : i("containerDefault")};
  }
`, d = e.div`
  display: flex;
  align-items: center;
`, m = e.span`
  ${r("size14")};
  color: ${i("contentInverse")};
`, g = e.div`
  display: flex;
  margin-top: ${t("s01")};
  justify-content: flex-end;
`, f = e.div`
  margin-left: auto;

  button {
    margin-left: ${t("s04")};
  }
`, $ = e(a)`
  padding: calc(${t("s04")} - 2px) ${t("s04")};
`;
export {
  g as ActionWrapper,
  f as CompactActionWrapper,
  d as CompactWrapper,
  m as MessageWrapper,
  $ as ToastCompactWrapper,
  a as ToastWrapper
};
