const n = (e) => {
  const { color: t, spacing: i, get: o } = e;
  return {
    ".dialog-overlay": {
      position: "fixed",
      inset: i(0),
      zIndex: 50,
      backgroundColor: t("brand.black"),
      opacity: 0.6
    },
    ".dialog-content": {
      position: "fixed",
      left: "50%",
      top: "50%",
      zIndex: 50,
      display: "grid",
      width: "100%",
      maxWidth: i(144),
      transform: "translate(-50%,-50%)",
      gap: i(4),
      backgroundColor: t("brand.white"),
      padding: i(10, 6, 4, 6),
      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
      transitionDuration: "200ms",
      "@media (min-width: 640px)": {
        borderRadius: i(2)
      }
    },
    ".dialog-close": {
      position: "absolute",
      right: i(1.5),
      top: i(2),
      borderRadius: i(0.5),
      opacity: 0.7,
      outline: `${i(0.5)} solid transparent`,
      outlineOffset: i(0.5),
      transitionProperty: "opacity",
      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
      transitionDuration: "150ms",
      "&:hover": {
        opacity: 1
      },
      "&:focus": {
        boxShadow: "0 0 0 2px white, 0 0 0 4px rgba(59, 130, 246, 0.5)"
      },
      "&:disabled": {
        pointerEvents: "none"
      },
      "&[data-state='open']": {
        backgroundColor: t("grey.10")
      }
    },
    ".dialog-description": {
      fontSize: o("fontSize.sm"),
      color: t("grey.70")
    },
    ".dialog-title": {
      fontSize: o("fontSize.xl"),
      lineHeight: 1,
      letterSpacing: "-0.025em",
      fontWeight: 500
    },
    ".dialog-footer": {
      display: "flex",
      flexDirection: "column-reverse",
      "@media (min-width: 640px)": {
        flexDirection: "row",
        justifyContent: "flex-end",
        "& > *:not(:last-child)": {
          marginRight: i(2)
        }
      }
    },
    ".dialog-header": {
      display: "flex",
      flexDirection: "column",
      textAlign: "center",
      "@media (min-width: 640px)": {
        textAlign: "left"
      }
    }
  };
}, a = {
  getComponents: n
};
export {
  a as TailwindDialog
};
