import { c as createStyles } from "./vendor-mantine-h0WlM2Mj.js";
const useStyles = createStyles((theme) => ({
  scrollbar: {
    ".mantine-ScrollArea-scrollbar": {
      zIndex: 1001
    }
  },
  header: {
    margin: 0,
    padding: "24px 24px 16px",
    borderRadius: "8px 8px 0 0",
    backgroundColor: "#F9FAFB"
  },
  title: {
    fontSize: theme.fontSizes.md
  },
  close: {
    svg: {
      width: 24,
      height: 24
    }
  },
  body: {
    padding: 0
  }
}));
const modalTheme = (theme) => {
  var _a, _b, _c, _d, _e, _f;
  return {
    root: {
      width: "100%",
      height: "100%",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "space-between"
    },
    container: {
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
      justifyContent: "flex-start",
      width: "100%",
      padding: `${(_a = theme.spacing) == null ? void 0 : _a.sm} ${(_b = theme.spacing) == null ? void 0 : _b.md}`
    },
    footer: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      width: "100%",
      backgroundColor: "#F9FAFB",
      height: "63px",
      padding: `0px ${(_c = theme.spacing) == null ? void 0 : _c.md}`,
      borderTop: "1px solid #F2F4F7"
    },
    cancelBtn: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      height: "36px",
      borderRadius: "8px",
      padding: `8px ${(_d = theme.spacing) == null ? void 0 : _d.sm}`,
      backgroundColor: ((_e = theme.colors) == null ? void 0 : _e.brandGray) ? (_f = theme.colors) == null ? void 0 : _f.brandGray[1] : "",
      fontSize: "14px",
      color: "#101828",
      fontWeight: 600,
      lineHeight: "17px",
      "&:hover": {
        backgroundColor: "#eff0f4"
      },
      "&:active": {
        transform: `translateY(1px)`
      }
    }
  };
};
export {
  modalTheme as m,
  useStyles as u
};
//# sourceMappingURL=styles-3NoIlzov.js.map
