import { getSizeStyles as i } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const s = {
  /**
   * Root slot: styles for the main container element of the Tab component.
   */
  root: ({ theme: a, ownerState: o }) => ({
    // common styles
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    width: "fit-content",
    maxWidth: "fit-content",
    minHeight: "fit-content",
    minWidth: "fit-content",
    gap: a.vars.size.baseSpacings.sp1,
    opacity: 1,
    overflow: "visible",
    // Borders and border radius
    borderBottom: 0,
    borderTopLeftRadius: a.vars.size.borderRadius.r1,
    borderTopRightRadius: a.vars.size.borderRadius.r1,
    boxSizing: "border-box",
    // Padding
    ...o?.hasDescription ? {
      paddingTop: a.vars.size.baseSpacings["sp0-5"],
      paddingBottom: o?.tabVariant === "contained" ? a.vars.size.baseSpacings["sp0-5"] : a.vars.size.baseSpacings.sp1
    } : {
      paddingTop: a.vars.size.baseSpacings.sp1,
      paddingBottom: a.vars.size.baseSpacings.sp1
    },
    position: "relative",
    transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
    // override styles
    "& .MuiTab-iconWrapper": {
      marginBottom: 0
    },
    //Disabled
    "&.Mui-disabled": {
      opacity: "1 !important"
    },
    "& .M4LIcon-iconSkeleton": {
      ...i(
        a,
        o?.size || "medium",
        "base",
        (r) => ({
          width: `${r}!important`,
          minWidth: `${r}!important`,
          height: `${r}!important`,
          minHeight: `${r}!important`
        })
      )
    },
    "& .M4LTab-tipography:first-of-type, & .M4LTab-title:first-of-type": {
      paddingLeft: a.vars.size.baseSpacings.sp1,
      paddingRight: a.vars.size.baseSpacings.sp1
    },
    "& .M4LChip-root": {
      marginLeft: o?.hasDescription ? a.vars.size.baseSpacings["sp1-5"] : 0
    },
    // variants styles
    // Outlined variant styles
    ...o?.tabVariant === "outlined" && {
      paddingLeft: a.vars.size.baseSpacings["sp2-5"],
      paddingRight: a.vars.size.baseSpacings["sp2-5"],
      // size styles
      ...i(
        a,
        o?.size || "medium",
        "container"
      ),
      // Not selected
      "&&&:not(.Mui-selected)": {
        transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
        "& .M4LIcon-icon": {
          backgroundColor: a.vars.palette.text.secondary
        },
        "& .M4LTab-tipography, & .M4LTab-title": {
          color: a.vars.palette.text.secondary
        },
        "& .M4LTab-description": {
          color: a.vars.palette.text.secondary
        },
        "& .M4LChip-root": {
          backgroundColor: a.vars.palette.chips.default.contained.backgroundColor,
          "& .M4LTypography-root": {
            color: a.vars.palette.chips.default.contained.color
          }
        },
        // pseudo-classes
        "&:hover": {
          background: a.vars.palette[o?.tabColor || "default"].hoverOpacity
        },
        "&:active": {
          background: a.vars.palette[o?.tabColor || "default"].activeOpacity
        },
        "&:focus-visible": {
          background: a.vars.palette[o?.tabColor || "default"].activeOpacity,
          boxShadow: `inset 0 0 0 1.3px ${a.vars.palette.primary.focusVisible}`
        }
      },
      // Selected
      "&&&.Mui-selected": {
        background: a.vars.palette.background.default,
        border: "unset",
        transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
        "& .M4LIcon-icon": {
          backgroundColor: a.vars.palette.primary.semanticText
        },
        "& .M4LTab-tipography, & .M4LTab-title": {
          color: a.vars.palette.primary.semanticText
        },
        "& .M4LTab-description": {
          color: a.vars.palette.text.secondary
        },
        // border bottom
        "&::after": {
          content: '""',
          width: "100%",
          height: a.vars.size.baseSpacings["sp0-5"],
          bottom: 0,
          backgroundColor: o?.tabSkeleton ? a.vars.palette.skeleton.default : o?.tabDisabled ? a.vars.palette.text.disabled : a.vars.palette.primary.enabled,
          position: "absolute"
        },
        // Pseudo-classes
        "&:hover": {
          backgroundColor: a.vars.palette.primary.hoverOpacity
        },
        "&:active": {
          background: a.vars.palette.primary.activeOpacity,
          ".M4LTab-icon div": {
            backgroundColor: a.vars.palette.primary.active
          },
          ".M4LTab-tipography, .M4LTab-title": {
            color: a.vars.palette.primary.active
          },
          "&::after": {
            background: a.vars.palette.primary.active
          }
        },
        "&:focus-visible": {
          background: a.vars.palette.primary.activeOpacity
        }
      }
    },
    // Contained variant styles
    ...o?.tabVariant === "contained" && {
      borderRadius: a.vars.size.borderRadius["r1-5"],
      paddingLeft: a.vars.size.baseSpacings.sp2,
      paddingRight: a.vars.size.baseSpacings.sp2,
      transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
      "& .M4LIcon-root.MuiSkeleton-root": {
        ...i(
          a,
          o?.size || "medium",
          "base",
          (r) => ({
            minWidth: `${r}!important`,
            minHeight: `${r}!important`
          })
        )
      },
      // size styles
      ...i(
        a,
        o?.size || "medium",
        "action"
      ),
      // Not selected
      "&&&:not(.Mui-selected)": {
        border: a.vars.size.borderStroke.container,
        borderColor: "transparent",
        "& .M4LIcon-icon": {
          backgroundColor: a.vars.palette.text.secondary
        },
        "& .M4LTab-tipography, & .M4LTab-title, & .M4LTab-description": {
          color: a.vars.palette.text.secondary
        },
        "& .M4LChip-root": {
          backgroundColor: a.vars.palette.chips.default.contained.backgroundColor,
          "& .M4LTypography-root": {
            color: a.vars.palette.chips.default.contained.color
          }
        },
        // pseudo-classes
        "&:hover": {
          background: a.vars.palette[o?.tabColor || "default"].hoverOpacity
        },
        "&:active": {
          background: a.vars.palette[o?.tabColor || "default"].activeOpacity
        },
        "&:focus-visible": {
          background: a.vars.palette[o?.tabColor || "default"].activeOpacity,
          boxShadow: `inset 0 0 0 1.3px ${a.vars.palette.primary.focusVisible}`
        }
      },
      // Selected
      "&&&.Mui-selected": {
        border: a.vars.size.borderStroke.container,
        borderColor: a.vars.palette.border.secondary,
        boxShadow: "0 1px 2px 0 rgba(9, 12, 16, 0.05), 0 -1px 1px 1px rgba(9, 12, 16, 0.04) inset;",
        backgroundColor: a.vars.palette.background.default,
        transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
        "& .M4LChip-root": {
          backgroundColor: a.vars.palette.chips.primary.contained.backgroundColor,
          "& .M4LTypography-root": {
            color: a.vars.palette.chips.primary.contained.color
          }
        },
        "& .M4LIcon-icon": {
          backgroundColor: a.vars.palette.text.primary
        },
        "& .M4LTab-tipography, & .M4LTab-title": {
          color: a.vars.palette.text.primary
        },
        "& .M4LTab-description": {
          color: a.vars.palette.text.secondary
        },
        // pseudo-classes
        "&:hover": {
          background: a.vars.palette.default.hover
        },
        "&:active": {
          background: a.vars.palette.default.active
        },
        "&:focus-visible": {
          background: a.vars.palette[o?.tabColor || "default"].activeOpacity,
          boxShadow: `inset 0 0 0 1.3px ${a.vars.palette.primary.focusVisible}`
        }
      }
    },
    // Disabled styles
    ...o?.tabDisabled && {
      ".M4LTab-icon div": {
        backgroundColor: `${a.vars.palette.text.disabled} !important`
      },
      "& .M4LIcon-icon": {
        backgroundColor: `${a.vars.palette.text.disabled} !important`
      },
      ".M4LTab-tipography, .M4LTab-title, .M4LTab-description": {
        color: `${a.vars.palette.text.disabled} !important`
      },
      "& .M4LChip-root": {
        backgroundColor: a.vars.palette.chips.disabled.contained.backgroundColor,
        "& .M4LTypography-root": {
          color: `${a.vars.palette.chips.disabled.contained.color} !important`
        }
      }
    }
    /**
     * **Pseudo-classes**:
     * - Styles for hover, focus-visible and active states (applied per variant above).
     */
    /**
     * **Selected state**:
     * - Styles applied when the tab has the `.Mui-selected` class.
     * - Includes specific overrides for the icon and typography slots.
     */
  }),
  /**
   * Typography slot (`tipography`):
   * - **General styles**: Sets base text color and cursor; applies skeleton width when in skeleton state.
   * - Kept for theme override compatibility; the component renders `TitleStyled` and `DescriptionStyled` internally.
   */
  tipography: ({ theme: a, ownerState: o }) => ({
    cursor: "pointer",
    paddingLeft: a.vars.size.baseSpacings.sp1,
    textAlign: "left",
    ...o?.tabSkeleton && {
      width: "32px"
    }
  }),
  /** Slot for grouping label and description in a column, left-aligned, with gap sp0-5. */
  labelGroup: ({ theme: a }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: a.vars.size.baseSpacings["sp0-5"]
  }),
  /** Slot for the tab title (label) text. */
  title: ({ theme: a, ownerState: o }) => ({
    cursor: "pointer",
    paddingLeft: a.vars.size.baseSpacings.sp1,
    textAlign: "left",
    ...o?.tabSkeleton && {
      width: "32px"
    }
  }),
  /** Slot for the tab description text. */
  description: ({ theme: a, ownerState: o }) => ({
    cursor: "pointer",
    paddingLeft: a.vars.size.baseSpacings.sp1,
    textAlign: "left",
    whiteSpace: "nowrap",
    ...o?.tabSkeleton && {
      width: "32px"
    }
  }),
  icon: {},
  /** Wrapper for startAdornment when it is an Image; adds marginRight sp0-5. */
  startAdornmentImageWrapper: ({ theme: a }) => ({
    marginRight: a.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex"
  }),
  /** Wrapper for endAdornment when it is an Image; adds marginLeft sp0-5. */
  endAdornmentImageWrapper: ({ theme: a }) => ({
    marginLeft: a.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex"
  })
};
export {
  s as tabStyles
};
