import { getSizeStyles as i } from "../../utils/getSizeStyles/getSizeStyles.js";
const p = {
  /**
   * Estilos para el elemento raíz del componente.
   */
  root: ({ theme: r, ownerState: e }) => {
    const a = e;
    return {
      display: "flex",
      alignItems: "center",
      gap: 0,
      backgroundColor: r.vars.palette.background.default,
      borderRadius: r.vars.size.borderRadius.r2,
      border: r.vars.size.borderStroke.container,
      borderColor: r.vars.palette.border.secondary,
      overflow: "hidden",
      width: "fit-content",
      ...a?.disabled && !a?.readOnly && {
        pointerEvents: "none"
      },
      ...a?.readOnly && {
        pointerEvents: "none",
        cursor: "default"
      }
    };
  },
  /**
   * Estilos para cada botón de día.
   */
  dayButton: ({ theme: r, ownerState: e }) => {
    const a = e, o = a?.selected, t = a?.disabled || !1, s = a?.readOnly || !1, n = a?.day === 0, d = a?.day === 6;
    return {
      "&&&": {
        minWidth: "auto",
        padding: r.vars.size.baseSpacings.sp1,
        borderRadius: 0,
        border: "none",
        // Todos los botones tienen borderRight con color border.secondary (excepto el último)
        borderRight: d ? "none" : `${r.vars.size.borderStroke.container}!important`,
        borderColor: `${r.vars.palette.border.secondary}!important`,
        // Solo cambia el backgroundColor según el estado de selección
        backgroundColor: o ? r.vars.palette.primary.enabledOpacity : r.vars.palette.background.paper,
        "& .MuiTypography-root": {
          ...t && {
            color: r.vars.palette.text.disabled
          },
          color: o ? r.vars.palette.primary.semanticText : r.vars.palette.default.semanticText
        },
        ...i(r, a?.size || "medium", "base"),
        ...n && {
          borderTopLeftRadius: r.vars.size.borderRadius["r1-5"],
          borderBottomLeftRadius: r.vars.size.borderRadius["r1-5"]
        },
        ...d && {
          borderTopRightRadius: r.vars.size.borderRadius["r1-5"],
          borderBottomRightRadius: r.vars.size.borderRadius["r1-5"]
        },
        ...!t && !s && {
          "&:hover": {
            backgroundColor: o ? r.vars.palette.primary.hoverOpacity : r.vars.palette.default.hoverOpacity
          },
          "&:active": {
            backgroundColor: o ? r.vars.palette.primary.activeOpacity : r.vars.palette.default.activeOpacity
          }
          /*  '&:focus-visible': {
            outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.primary.main}`,
            outlineOffset: -1,
          }, */
        },
        ...t && !s && {
          cursor: "not-allowed",
          opacity: 0.5
        },
        ...s && {
          cursor: "default",
          pointerEvents: "none"
        }
      }
    };
  },
  /**
   * Estilos para el skeleton del componente.
   */
  skeleton: ({ theme: r, ownerState: e }) => ({
    borderRadius: r.vars.size.borderRadius.r2,
    ...i(r, e?.size || "medium", "base", (a) => ({
      width: "234px!important",
      height: `${a}!important`
    }))
  })
};
export {
  p as daysOfWeekPickerStyles
};
