import { getSingleLineInputLineHeight as a, getTypographyStyles as n } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as t } from "../../utils/getSizeStyles/getSizeStyles.js";
import { getSharedInputStateColors as d } from "../../utils/getSharedInputStateColors.js";
const u = {
  /**
   * Styles applied to the main root container.
   */
  root: ({ theme: o, ownerState: i }) => {
    const r = d(o, !!i?.error);
    return {
      // General styles
      display: "flex",
      alignItems: "center",
      position: "relative",
      height: "auto",
      width: "100%",
      gap: o.vars.size.baseSpacings.sp1,
      paddingLeft: o.vars.size.baseSpacings.sp1,
      paddingRight: i?.noButtons && o.vars.size.baseSpacings.sp1,
      boxSizing: "border-box",
      overflow: "hidden",
      ...t(
        o,
        i?.size || "medium",
        "action",
        (e) => ({
          // Keep the button column on an explicit height while matching the visible outer height
          // used by other bordered input surfaces.
          height: e,
          minHeight: e,
          maxHeight: e
        })
      ),
      // Variants (Outlined and Text)
      ...i?.variant === "outlined" && {
        border: o.vars.size.borderStroke.actionInput,
        borderColor: r.borderColor,
        borderRadius: o.vars.size.borderRadius["r1-5"]
      },
      ...i?.variant === "text" && {
        borderBottom: o.vars.size.borderStroke.actionInput,
        borderColor: r.borderColor,
        borderRadius: o.vars.size.borderRadius["r1-5"]
      },
      // States (Pseudo-classes)
      ...i?.disabled === !1 && {
        "&:hover": {
          background: r.hoverBackgroundColor,
          borderColor: r.hoverBorderColor,
          "& button": {
            background: r.hoverBackgroundColor,
            "&:hover": {
              // background: theme.vars.palette?.default.hover,
            }
          }
        },
        "&:focus-within": {
          borderColor: r.focusBorderColor,
          ...i?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${r.focusRingColor}`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${r.focusRingColor}`
          }
        },
        "&:active": {
          background: o.vars.palette.background.default,
          borderColor: r.focusBorderColor
        }
      }
    };
  },
  /**
   * Styles applied to the input field.
   */
  input: ({ theme: o, ownerState: i }) => ({
    // General styles
    background: "transparent",
    border: 0,
    outline: 0,
    color: i?.disabled ? o.vars.palette.text.disabled : o.vars.palette.text.primary,
    height: "max-content ",
    width: "100%",
    ...i?.focusError && {
      color: o.vars.palette.error.enabled
    },
    ...n(
      o.generalSettings.isMobile,
      i?.size || "small",
      "bodyStandard"
    ),
    ...a(),
    fontFamily: o.typography.fontFamily
  }),
  /**
   * Styles for the buttons and endAdornment wrapper.
   */
  ContainButtonsAdornment: ({ theme: o }) => ({
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignContent: "center",
    height: "100%",
    gap: o.vars.size.baseSpacings.sp2,
    span: {
      alignSelf: "center"
    }
  }),
  /**
   * Styles applied to the increment and decrement buttons container.
   */
  containerButtons: ({ theme: o, ownerState: i }) => ({
    display: "flex",
    flexDirection: "column",
    height: "100%",
    minHeight: 0,
    flexShrink: 0,
    alignSelf: "stretch",
    ...t(
      o,
      i?.size || "medium",
      "action",
      (r) => ({
        width: r,
        minWidth: r,
        maxWidth: r
      }),
      "width"
    )
  }),
  /**
   * Styles for the increment button.
   */
  increment: ({ theme: o }) => ({
    "&&&": {
      // General styles
      flex: "1 1 0",
      height: "auto",
      minHeight: 0,
      maxHeight: "none",
      width: "100%",
      minWidth: "100%",
      maxWidth: "100%",
      background: o.vars.palette.default.enabled,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      borderTopLeftRadius: 0,
      borderTopRightRadius: `calc(${o.vars.size.borderRadius["r1-5"]} - 1px)`,
      outlineOffset: 0,
      // States (Pseudo-classes)
      "&:focus-visible": {
        zIndex: 1,
        outline: `1px solid ${o.vars.palette?.primary.enabled}`
      },
      "&:active": {
        background: `${o.vars.palette?.default.active} !important`
      },
      "& div": {
        height: "100%",
        width: "100%",
        "& div": {
          height: "100%",
          width: "50%",
          minHeight: "min-content",
          maskPosition: "center center"
        }
      }
    }
  }),
  /**
   * Styles for the decrement button.
   */
  decrement: ({ theme: o }) => ({
    "&&&": {
      // General styles
      flex: "1 1 0",
      height: "auto",
      minHeight: 0,
      maxHeight: "none",
      width: "100%",
      minWidth: "100%",
      maxWidth: "100%",
      background: o.vars.palette.default.enabled,
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: `calc(${o.vars.size.borderRadius["r1-5"]} - 1px)`,
      outlineOffset: 0,
      // States (Pseudo-classes)
      "&:focus-visible": {
        zIndex: 1,
        outline: `1px solid ${o.vars.palette?.primary.enabled}`
      },
      "&:active": {
        background: `${o.vars.palette?.default.active} !important`
      },
      "& div": {
        height: "100%",
        width: "100%",
        "& div": {
          height: "100%",
          width: "50%",
          minHeight: "min-content",
          maskPosition: "center center"
        }
      }
    }
  }),
  /**
   * Styles applied to the skeleton.
   */
  skeleton: ({ theme: o, ownerState: i }) => ({
    "&.M4lclassCssSpecificity": {
      width: "100%",
      ...t(
        o,
        i?.size || "medium",
        "action",
        (r) => ({
          height: r,
          minHeight: r,
          maxHeight: r
        })
      )
    }
  })
};
export {
  u as numberInputStyles
};
