import { getTypographyStyles as y } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as l } from "../../utils/getSizeStyles/getSizeStyles.js";
const b = {
  /**
   * Estilos para el elemento raíz del componente.
   */
  root: ({ theme: t }) => ({
    display: "flex",
    flexDirection: "column",
    gap: t.vars.size.baseSpacings.sp1,
    width: "fit-content"
  }),
  /**
   * Estilos para el contenedor de días.
   */
  days: ({ theme: t }) => ({
    display: "grid",
    gridTemplateColumns: "repeat(7, 1fr)",
    gap: t.vars.size.baseSpacings.sp1,
    width: "100%"
  }),
  /**
   * Estilos para cada día individual (slot con overrides de Button).
   */
  day: ({ theme: t, ownerState: n }) => {
    const e = n, a = e?.selected, d = e?.disabled, p = e?.readOnly, s = a ? t.vars.palette.primary.enabledOpacity : "transparent";
    let i = t.vars.palette.default.semanticText;
    a && (i = t.vars.palette.primary.enabled), d && (i = t.vars.palette.text.disabled);
    const c = t.vars.size.borderRadius.r2, r = !d && !p;
    return {
      "&&&": {
        ...l(t, e?.size || "medium", "action", (o) => ({
          minWidth: o,
          width: o,
          height: o,
          minHeight: o
        })),
        ...y(t.generalSettings.isMobile, e?.size || "medium", "bodyStandard"),
        padding: 0,
        borderRadius: c,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        border: "none",
        // Usar !important cuando está selected para sobrescribir el backgroundColor: 'unset' del Button base (variante text)
        backgroundColor: a ? `${t.vars.palette.primary.enabledOpacity}!important` : s,
        // Usar !important cuando está selected para sobrescribir el color del texto del Button base (especialmente cuando está disabled)
        color: `${i}!important`,
        cursor: r ? "pointer" : "default",
        transition: "background-color 0.2s ease, color 0.2s ease",
        pointerEvents: r ? "auto" : "none",
        // Estado hover: mantener el backgroundColor actual si está disabled o readOnly
        "&:hover": {
          backgroundColor: r ? a ? `${t.vars.palette.primary.enabledOpacity}!important` : t.vars.palette.default.hoverOpacity : `${s}!important`
          // Mantener el estado base si no hay estados interactivos
        },
        // Estado active: mantener el backgroundColor actual si está disabled o readOnly
        "&:active": {
          backgroundColor: r ? a ? `${t.vars.palette.primary.activeOpacity}!important` : t.vars.palette.default.activeOpacity : `${s}!important`
          // Mantener el estado base si no hay estados interactivos
        },
        // Estado focus visible (solo si no está deshabilitado ni en readOnly)
        ...r && {
          "&:focus-visible": {
            outline: `${t.vars.size.borderStroke.container} solid ${t.vars.palette.primary.focusVisible}`,
            outlineOffset: "2px"
          }
        },
        // Override del texto del botón
        "& .M4LButton-textButton": {
          // Usar !important cuando está selected para sobrescribir el color del Button base (especialmente cuando está disabled)
          color: `${i}!important`,
          padding: 0,
          fontSize: t.typography.bodyDens.fontSize,
          fontWeight: a ? 600 : 400,
          minWidth: "auto",
          width: "auto",
          cursor: "inherit"
          // Heredar el cursor del contenedor
        }
      }
    };
  },
  /**
   * Estilos para cada día individual en modo skeleton.
   */
  skeletonDay: ({ theme: t, ownerState: n }) => ({
    ...l(t, n?.size || "medium", "action", (a) => ({
      minWidth: a,
      width: a,
      height: a,
      minHeight: a
    }))
  })
};
export {
  b as daysOfMonthPickerStyles
};
