import { getSizeStyles as t } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const n = {
  /**
   * Root slot: styles for the main Tabs container (MuiTabs). Handles outlined vs contained
   * variant, scroll-button layout, flex container gap, and indicator visibility.
   */
  root: ({ theme: o, ownerState: i }) => ({
    "&&&": {
      position: "relative",
      zIndex: 1,
      display: "flex",
      overflow: "auto",
      alignItems: "center",
      width: "100%",
      height: "fit-content",
      maxWidth: "fit-content",
      minHeight: "fit-content",
      gap: o.vars.size.baseSpacings.sp1,
      background: o.vars.palette.background.default,
      paddingBottom: o.vars.size.baseSpacings.sp0,
      borderRadius: o.vars.size.borderRadius.r1,
      borderBottomLeftRadius: o.vars.size.borderRadius.r0,
      borderBottomRightRadius: o.vars.size.borderRadius.r0,
      marginBottom: "1px",
      borderBottom: "unset",
      ...i?.variantComponent === "contained" && {
        "& .MuiTabScrollButton-root .MuiButtonBase-root": {
          height: "100%!important",
          backgroundColor: `${o.vars.palette.default.enabled} !important`
        },
        "& .MuiTabs-scroller": {
          borderRadius: o.vars.size.borderRadius.r2,
          backgroundColor: o.vars.palette.background.base,
          border: o.vars.size.borderStroke.container,
          borderColor: o.vars.palette.border.disabled,
          padding: o.vars.size.baseSpacings["sp0-5"]
        }
      },
      "& .MuiTabScrollButton-root.Mui-disabled": {
        display: "none !important"
      },
      "& .MuiTabs-flexContainer": {
        gap: i?.variantComponent === "contained" ? o.vars.size.baseSpacings.sp1 : 0,
        background: "transparent"
      },
      "& .MuiTabs-indicator": {
        display: "none"
      },
      "& .simplebar-content": {
        display: "flex",
        gap: o.vars.size.baseSpacings.sp0
      },
      "& .MuiTabScrollButton-root": {
        width: "fit-content",
        padding: "0",
        margin: "0",
        border: "none",
        borderRadius: "0",
        ...i?.variantComponent === "contained" && {
          ...t(
            o,
            i?.size || "medium",
            "box",
            (a) => ({
              height: `${a} !important`,
              minHeight: `${a} !important`,
              maxHeight: `${a} !important`
            })
          )
        },
        ...i?.variantComponent !== "contained" && {
          height: "fit-content"
        },
        "& .MuiTouchRipple-root": {
          display: "none !important"
        },
        "& .MuiButtonBase-ripple": {
          display: "none !important"
        },
        "& .MuiTouchRipple-ripple": {
          display: "none !important"
        },
        "& .MuiTouchRipple-rippleVisible": {
          display: "none !important"
        },
        "& .M4LIconButton-styledMUIIconButton, & .MuiSkeleton-root": {
          width: o.vars.size.baseSpacings.sp4,
          "& .M4LIcon-icon": {
            backgroundColor: o.vars.palette.text.primary
          }
        }
      }
    }
  })
};
export {
  n as tabsStyles
};
