import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
const c = {
  /**
   *
   * Estilos para el contenedor principal del Stepper.
   */
  stepperRoot: ({ theme: i }) => ({
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    background: i.vars.palette.background.default,
    width: "100%",
    height: "100%",
    borderRadius: i.vars.size.borderRadius.r1
  }),
  /**
   * Estilos para la sección que contiene los pasos del Stepper.
   */
  contentSection: ({ theme: i, ownerState: e }) => ({
    display: "flex",
    flex: 1,
    height: "100%",
    overflow: "hidden",
    gap: i.vars.size.baseSpacings.sp6,
    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
      flexDirection: "column"
    } : {
      flexDirection: "row"
    }
  }),
  /**
   * Estilos para el contenido del paso dentro del Stepper.
   */
  stepContent: ({ ownerState: i }) => ({
    height: "100%",
    display: i?.isStepVisible ? "flex" : "none",
    flexDirection: "column"
  }),
  /**
   * Estilos para la sección que contiene los botones de acción del Stepper.
   */
  stepArea: ({ theme: i, ownerState: e }) => ({
    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
      display: "flex",
      alignItems: "start",
      width: "100%",
      overflowX: "auto",
      overflowY: "hidden"
    } : {
      maxWidth: "116px",
      overflowY: "auto"
    }
  }),
  /**
   * Estilos para el área de contenido del Stepper.
   */
  contentArea: ({ theme: i, ownerState: e }) => ({
    flex: 1,
    display: "flex",
    flexDirection: "column",
    overflowY: "auto",
    ...e?.orientation === "vertical" || i.generalSettings.isMobile ? {
      // borderTop: '1px solid',
      gap: i.vars.size.baseSpacings.sp4
      // paddingTop: theme.vars.size.baseSpacings.sp8,
    } : {
      gap: i.vars.size.baseSpacings.sp6,
      borderLeft: "1px solid",
      paddingLeft: i.vars.size.baseSpacings.sp8
    },
    borderColor: i.vars.palette?.border.disabled
  }),
  /**
   * Estilos para cada paso del Stepper.
   */
  step: ({ theme: i, ownerState: e }) => {
    const t = e?.currentStep ?? 0, r = e?.step ?? 0, s = e?.totalSteps ?? 0, a = t > r, n = r === s - 1;
    return {
      cursor: "pointer",
      display: e?.isStepVisible ? "flex" : "none",
      flexDirection: e?.orientation === "vertical" || i.generalSettings.isMobile ? "column" : "row",
      alignItems: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "start",
      justifyContent: e?.visibleTitle ? "space-between" : "center",
      gap: e?.orientation === "vertical" || i.generalSettings.isMobile ? i.vars.size.baseSpacings.sp1 : i.vars.size.baseSpacings.sp4,
      width: "100%",
      ...(e?.orientation === "vertical" || i.generalSettings.isMobile) && {
        minWidth: i.vars.size.baseSpacings.sp10
      },
      height: e?.orientation === "vertical" || i.generalSettings.isMobile ? "auto" : i.vars.size.baseSpacings.sp13,
      position: "relative",
      ...!n && (e?.orientation === "vertical" || i.generalSettings.isMobile) && {
        "&::after": {
          content: '""',
          position: "absolute",
          top: e?.orientation === "horizontal" && i.generalSettings.isMobile ? "16px" : "10px",
          // Ajustado para coincidir con el centro del indicador cuando alignItems es start
          height: "1px",
          borderTop: `1px ${a ? "solid" : "dashed"} ${a ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`,
          left: "50%",
          width: "100%"
        }
      }
    };
  },
  /**
   * Estilos para el nombre del paso dentro del Stepper.
   */
  stepName: ({ theme: i, ownerState: e }) => ({
    ...e?.orientation === "horizontal" && !i.generalSettings.isMobile && {
      minHeight: i.vars.size.desktop.medium.action,
      maxWidth: "120px",
      width: "100%"
    },
    ...(e?.orientation === "vertical" || i.generalSettings.isMobile) && {
      maxWidth: "120px",
      width: "100%",
      marginTop: i.vars.size.baseSpacings.sp1
    },
    alignContent: "center",
    cursor: "pointer",
    ...i.generalSettings.isMobile ? {
      display: "none"
    } : {
      display: e?.visibleTitle ? "block" : "none"
    },
    flex: 1,
    minWidth: 0,
    order: e?.orientation === "vertical" || i.generalSettings.isMobile ? 1 : 0,
    "&.M4LTypography-root": {
      color: e?.originalStepIndex !== void 0 && typeof e.originalStepIndex == "number" ? (e.currentStep ?? 0) > e.originalStepIndex ? i.vars.palette.primary.semanticText : (e.currentStep ?? 0) === e.originalStepIndex ? i.vars.palette.text.primary : i.vars.palette.text.secondary : i.vars.palette.text.secondary,
      textAlign: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "right"
    }
  }),
  /**
   * Estilos para el texto del nombre del paso con truncado (line-clamp).
   */
  stepNameText: ({ theme: i, ownerState: e }) => ({
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": "2",
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal",
    width: "100%",
    direction: "ltr",
    lineHeight: 1.2,
    textAlign: e?.orientation === "vertical" || i.generalSettings.isMobile ? "center" : "left"
  }),
  /**
   * Estilos para el indicador numérico de cada paso del Stepper.
   */
  indicator: ({ theme: i, ownerState: e }) => {
    const t = e?.step ?? 0, r = e?.totalSteps ?? 0, s = e?.isCompleted ?? !1, a = e?.isCurrent ?? !1, n = e?.isValidStep ?? !0, p = t === r - 1;
    return {
      ...e?.orientation === "horizontal" ? {
        marginTop: i.generalSettings.isMobile ? "6px" : i.vars.size.baseSpacings.sp1
      } : {},
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      flexShrink: 0,
      zIndex: 1,
      order: e?.orientation === "vertical" || i.generalSettings.isMobile ? 0 : 1,
      background: !n && e?.hasBeenValidated ? i.vars.palette.error.enabled : s && n ? e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.primary.toneOpacity : a ? e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.primary.enabled : e?.indicatorType === "dot" || i.generalSettings.isMobile ? i.vars.palette.background.default : i.vars.palette.default.enabled,
      borderRadius: i.vars.size.borderRadius.r2,
      ...e?.indicatorType === "number" && !i.generalSettings.isMobile && {
        boxShadow: a ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
      },
      position: "relative",
      ...!p && e?.orientation === "horizontal" && !i.generalSettings.isMobile && {
        "&::after": {
          content: '""',
          position: "absolute",
          top: "100%",
          left: "50%",
          transform: "translateX(-50%)",
          width: "1px",
          height: i.vars.size.baseSpacings.sp12,
          borderLeft: `1px ${s ? "solid" : "dashed"} ${s ? i.vars.palette.primary.enabled : i.vars.palette.border.default}`
        }
      },
      ...o(i, e?.size || "medium", "case", (l) => ({
        width: l,
        height: l
      }))
    };
  },
  /**
   * Estilos para el número de texto dentro del indicador numérico del Stepper.
   */
  textNumber: ({ theme: i, ownerState: e }) => {
    const t = e?.isCompleted ?? !1, r = e?.isCurrent ?? !1, s = e?.isValidStep ?? !0, a = e?.hasBeenValidated ?? !1;
    return {
      "&.M4LTypography-root": {
        color: !s && a ? i.vars.palette.error.contrastText : t || r ? i.vars.palette.primary.contrastText : i.vars.palette.text.primary
      }
    };
  },
  /**
   * Estilos para el área de contenido del Stepper.
   */
  contentAreaHeader: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    gap: i.size.baseSpacings.sp3,
    position: "sticky",
    top: 0,
    backgroundColor: i.vars.palette.background.default,
    zIndex: 10
    // paddingBottom: theme.vars.size.baseSpacings.sp2,
  }),
  /**
   * Estilos para el cuerpo del área de contenido del Stepper
   */
  contentAreaBody: ({ theme: i }) => ({
    flex: 1,
    overflowY: "auto",
    display: "flex",
    flexDirection: "column",
    gap: i.vars.size.baseSpacings.sp6
  }),
  /**
   * Estilos para el contenedor del icono del titulo del Stepper.
   */
  wrapperIcon: ({ theme: i, ownerState: e }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    background: i.vars.palette.primary.enabledOpacity,
    borderRadius: i.vars.size.borderRadius["r1-5"],
    ...o(i, e?.size || "medium", "box", (t) => ({
      width: t,
      height: t
    }))
  }),
  /**
   * Estilos para el título del Stepper.
   */
  wrapperTitle: ({ theme: i }) => ({
    color: i.vars.palette.text.primary,
    display: "flex",
    flexDirection: "column",
    gap: i.vars.size.baseSpacings["sp0-5"],
    flex: 1,
    minWidth: 0,
    overflow: "hidden"
  }),
  /**
   * Estilos para el icono del Stepper.
   */
  icon: ({ theme: i, ownerState: e }) => ({
    ...o(i, e?.size || "medium", "case", (t) => ({
      width: t,
      height: t
    }))
  }),
  /**
   * Estilos para el título del Stepper (Typography wrapper, same role as stepName).
   */
  title: () => ({
    minWidth: 0,
    width: "100%",
    overflow: "hidden"
  }),
  /**
   * Text wrapper for title with line-clamp (same as stepNameText: max 2 lines, then ellipsis).
   */
  titleText: () => ({
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": "2",
    overflow: "hidden",
    textOverflow: "ellipsis",
    wordBreak: "break-word",
    whiteSpace: "normal",
    width: "100%",
    direction: "ltr",
    lineHeight: 1.2
  }),
  /**
   * Estilos para la descripción del Stepper.
   */
  description: ({ theme: i }) => ({
    minWidth: 0,
    overflow: "hidden",
    width: "100%",
    maxWidth: "100%",
    "&.M4LTypography-root": {
      color: i.vars.palette.text.secondary,
      overflow: "hidden",
      minWidth: 0,
      textOverflow: "ellipsis",
      whiteSpace: "nowrap"
    }
  }),
  /**
   * Estilos para la sección de botones de acción del Stepper.
   */
  stepperFooterSection: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexWrap: "wrap",
    gap: i.vars.size.baseSpacings.sp2,
    paddingTop: i.vars.size.baseSpacings.sp4,
    position: "sticky",
    bottom: 0,
    backgroundColor: i.vars.palette.background.default,
    marginTop: "auto",
    zIndex: 10
  }),
  /**
   * Estilos para las acciones del lado izquierdo del StepperFooter.
   */
  stepperFooterLeftActions: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    gap: i.vars.size.baseSpacings.sp3
  }),
  /**
   * Estilos para las acciones del lado derecho del StepperFooter.
   */
  stepperFooterRightActions: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    gap: i.vars.size.baseSpacings.sp3
  }),
  /**
   * Estilos para el contenedor de los botones del Stepper.
   */
  wrapperButtons: ({ theme: i }) => ({
    display: "flex",
    gap: i.size.baseSpacings.sp3
  })
};
export {
  c as stepperStyles
};
