import r, { keyframes as l, css as e } from "styled-components";
import { getColorAlias as a, convertToTransientProps as n, getSpacing as o, getFontSize as d } from "../../utils/index.js";
import { getModalSize as p } from "./utils.js";
const s = 200, h = l`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`, f = l`
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`, w = r.div.withConfig({
  shouldForwardProp: n(["isOpen"])
})`
  inset: 0;
  position: fixed;
  background-color: ${a("overlay")};
  z-index: 5000;

  display: flex;
  justify-content: center;

  ${(t) => t.isOpen ? e`
          animation: ${h} ${s}ms forwards;
        ` : e`
          animation: ${f} ${s}ms ${s}ms
            forwards;
        `}
`, v = r.div`
  --height-offset: ${({ position: t }) => t === "top" ? 2 : 1};
  --dialog-gutter: ${({ variant: t }) => t === "narrow" ? o("s04") : o("s05")};
  max-height: calc(100vh - ${o("s09")} * var(--height-offset));
  width: calc(100vw - 60px);
  max-width: ${({ size: t }) => p(t)};
  display: flex;
  flex-direction: column;
  font-family: ${(t) => t.theme.font.familyPrimary};
  background-color: ${a("backgroundDefault")};
  color: ${a("contentDefault")};
  position: fixed;
  padding-top: var(--dialog-gutter);
  padding-bottom: var(--dialog-gutter);
  box-shadow: ${(t) => t.theme.elevation.e4};
  outline: none;
  border-radius: ${o("s04")};
  overflow-y: auto;

  ${({ position: t }) => t === "center" ? e`
          align-self: center;
        ` : e`
          margin-top: ${o("s10")};
          @media (max-height: 600px) {
            margin-top: 5vh;
          }
        `};
`, b = r.div`
  --header-gutter: ${({ variant: t }) => t === "narrow" ? o("s04") : o("s05")};
  padding-left: var(--header-gutter);
  padding-right: var(--header-gutter);
  position: sticky;
  top: ${o("s00")};

  button {
    position: absolute;
    right: var(--header-gutter);
    top: calc(${o("s02")} * -1);
    width: ${o("s07")};
    height: ${o("s07")};

    svg {
      width: ${o("s05")};
      height: ${o("s05")};
      fill: ${a("contentDefault")};
    }

    @media print {
      display: none;
    }
  }
`, y = r.h1.withConfig({
  shouldForwardProp: n([
    "hideCloseIcon"
  ])
})`
  ${({ variant: t }) => t === "narrow" ? d("size20") : d("size24")}
  color: ${a("contentDefault")};
  margin-top: ${o("s00")};
  margin-right: ${o("s00")};
  margin-bottom: ${o("s04")};
  margin-left: ${o("s00")};
  font-weight: 800;
  word-break: break-word;

  ${({ hideCloseIcon: t }) => !t && e`
      width: calc(100% - ${o("s08")});
    `};

  ${({ mode: t }) => t === "truncated" && e`
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `};
`, x = r.div.withConfig({
  shouldForwardProp: n([
    "pinnedFooter",
    "stackedActionButtons"
  ])
})`
  --content-margin: calc(${o("s10")} - ${o("s01")});
  --content-gutter: ${({ variant: t }) => t === "narrow" ? o("s04") : o("s05")};
  overflow-y: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);

  ${({ pinnedFooter: t, action: i, stackedActionButtons: c, theme: g }) => t && i && e`
      margin-bottom: calc(
        var(--content-margin) *
          ${c && i === "confirm" ? 2 : 1}
      );

      ${g.mode === "light" && e`
        /* Shadow if content is scrollable */
        background: linear-gradient(white 30%, transparent) center top,
          linear-gradient(transparent, white 70%) center bottom,
          radial-gradient(farthest-side at 50% 0, transparent, rgba(0, 0, 0, 0))
            center top,
          radial-gradient(
              farthest-side at 50% 100%,
              rgba(0, 0, 0, 0.3),
              rgba(0, 0, 0, 0)
            )
            center bottom;

        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 14px, 110% 14px;
        background-attachment: local, local, scroll, scroll;
      `}
    `};
`, k = r.div.withConfig({
  shouldForwardProp: n([
    "pinnedFooter",
    "stackedActionButtons"
  ])
})`
  display: flex;
  box-sizing: initial;

  ${({ stackedActionButtons: t }) => t ? e`
          flex-direction: column;
          justify-content: center;

          button {
            &:not(:last-child) {
              margin-bottom: ${o("s04")};
            }
          }
        ` : e`
          justify-content: flex-end;

          button {
            &:not(:last-child) {
              margin-right: ${o("s04")};
            }
          }
        `}

  ${({ pinnedFooter: t, variant: i }) => t ? e`
          --footer-gutter: ${i === "narrow" ? o("s04") : o("s05")};
          position: absolute;
          bottom: 0;
          left: 0;
          width: calc(100% - var(--footer-gutter) * 2);
          padding: var(--footer-gutter);
        ` : e`
          margin-top: ${o("s05")};
        `}
`, F = r.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 188px;
`;
export {
  v as Dialog,
  k as ModalFooter,
  F as ModalLoadingWrapper,
  y as ModalTitle,
  w as Overlay,
  x as StyledModalContent,
  b as StyledModalHeader
};
