import { keyframes as p } from "@emotion/react";
import { TAB_MAX_HEIGHT as i, TAB_MAX_WIDTH as e, TABS_NAVIGATOR_CLASSES as t, WIDTH_SCROLL_BAR as c } from "./constants.js";
import { getSizeStyles as s } from "../../utils/getSizeStyles/getSizeStyles.js";
const v = p`
  0%, 10% {
    transform: translateX(0);
  }
  90%, 100% {
    transform: translateX(var(--scroll-distance));
  }
`, f = {
  /**
   * Root Styles
   */
  root: ({ theme: a, ownerState: r }) => ({
    overflow: "visible",
    ...r?.variant === "vertical" && {
      height: "100%",
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
      justifyContent: "flex-start"
    },
    ...r?.variant === "horizontal" && {
      width: "100%",
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "flex-start",
      borderTop: a.vars.size.borderStroke.container,
      borderColor: a.vars.palette.border.secondary
    }
  }),
  /**
   * Tab Navigator Styles
   */
  tabNavigatorContainer: ({ theme: a, ownerState: r }) => ({
    position: "relative",
    maxWidth: e,
    minWidth: e,
    maxHeight: i,
    minHeight: i,
    overflow: "hidden",
    outline: "unset",
    "&:hover": {
      overflow: "visible"
    },
    // Estilos de estado focus-visible aplica para estado selected y no selected.
    "&:focus-visible": {
      [`& .${t.tabNavigatorIconContainer}`]: {
        boxShadow: `inset 0px 0px 0px 1px ${a.vars.palette.primary.focusVisible}`
      }
    },
    // Estilos de estado CON selección
    ...r?.selected && {
      // Estilos de estado hover
      [`& .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.primary.hoverOpacity
      },
      // Estilos de estado active
      [`&:active .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.primary.activeOpacity
      },
      // Estilos de estado focus-visible
      [`&:focus-visible .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.primary.activeOpacity
      }
    },
    // Estilos de estado SIN seleccionado
    ...!r?.selected && {
      // Estilos de estado hover
      [`&:hover .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.default.hoverOpacity
      },
      // Estilos de estado active
      [`&:active .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.default.activeOpacity
      },
      // Estilos de estado focus-visible
      [`&:focus-visible .${t.tabNavigatorIconContainer}`]: {
        backgroundColor: a.vars.palette.default.activeOpacity
      }
    }
  }),
  /**
   * Content Popover Styles
   */
  contentPopover: ({ theme: a, ownerState: r }) => {
    const o = r?.totalTabs || 1, l = r?.maxColumnsPopover || 4, n = Math.min(o, l), d = Math.max(0, n - 1) * 4;
    return {
      display: "flex",
      flexDirection: "row",
      overflow: "visible",
      width: n * e + d + c,
      maxHeight: 300,
      gap: a.vars.size.baseSpacings.sp1
    };
  },
  /**
   * Tab Navigator Positioned Container Styles
   */
  tabNavigatorPositionedContainer: ({ theme: a }) => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: a.vars.size.baseSpacings.sp1,
    width: "100%",
    cursor: "pointer",
    position: "absolute",
    minHeight: i,
    borderRadius: a.vars.size.borderRadius.r3,
    [`&.${t.normal}`]: {
      paddingTop: a.vars.size.baseSpacings.sp3,
      paddingLeft: a.vars.size.baseSpacings["sp1-5"],
      paddingRight: a.vars.size.baseSpacings["sp1-5"],
      paddingBottom: 0
    },
    [`&.${t.cluster}`]: {
      paddingTop: a.vars.size.baseSpacings.sp2,
      paddingLeft: a.vars.size.baseSpacings.sp2,
      paddingRight: a.vars.size.baseSpacings.sp2,
      paddingBottom: a.vars.size.baseSpacings.sp2
    },
    "&:hover": {
      height: "fit-content",
      zIndex: 1,
      backgroundColor: a.vars.palette.background.default,
      border: a.vars.size.borderStroke.container,
      borderColor: a.vars.palette.border.disabled,
      boxShadow: a.vars.customShadows.z3,
      [`& .${t.tabNavigatorLabel}`]: {
        display: "inline",
        overflow: "hidden",
        textOverflow: "unset",
        whiteSpace: "normal"
      },
      [`& .${t.typographyTextMarqueeContainer} .${t.typographyTextMarquee}[data-should-animate="true"]`]: {
        animation: `${v} var(--scroll-duration, 3s) linear forwards`,
        textOverflow: "clip"
      }
    }
  }),
  /**
   * Tab Navigator Icon Container Styles
   */
  tabNavigatorIconContainer: ({ theme: a, ownerState: r }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "fit-content",
    height: "fit-content",
    padding: a.vars.size.baseSpacings.sp2,
    borderRadius: a.vars.size.borderRadius.r2,
    transition: "all 0.2s ease",
    borderColor: "transparent",
    ...s(
      a,
      r?.size || "medium",
      "box",
      (o) => ({
        width: o,
        height: o
      })
    ),
    "& .M4LIcon-iconSkeleton": {
      ...s(
        a,
        r?.size || "medium",
        "case",
        (o) => ({
          width: o,
          height: o,
          minWidth: o,
          minHeight: o
        })
      )
    },
    ...r?.selected && {
      border: a.vars.size.borderStroke.container,
      borderColor: `${a.vars.palette.primary.selectedOpacity} !important`,
      backgroundColor: a.vars.palette.primary.enabledOpacity,
      "&&& .M4LIcon-icon": {
        backgroundColor: a.vars.palette.primary.enabled
      }
    }
  }),
  /**
   * Tab Navigator Icon Styles
   */
  tabNavigatorIcon: ({ theme: a, ownerState: r }) => ({
    ...s(
      a,
      r?.size || "medium",
      "case",
      (o) => ({
        width: o,
        height: o
      })
    ),
    "& .M4LIcon-icon": {
      ...r?.selected ? {
        backgroundColor: a.vars.palette.text.primary
      } : {
        backgroundColor: a.vars.palette.text.secondary
      }
    }
  }),
  /**
   * Typography Text Marquee Container Styles
   */
  typographyTextMarqueeContainer: () => ({
    overflow: "hidden",
    maxWidth: "100%",
    position: "relative"
  }),
  /**
   * Typography Text Marquee Styles
   */
  typographyTextMarquee: () => ({
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "inline-block"
  }),
  /**
   * Tab Navigator Label Styles
   */
  tabNavigatorLabel: ({ theme: a, ownerState: r }) => ({
    display: "inline",
    width: "100%",
    textAlign: "center",
    wordBreak: "break-word",
    cursor: "pointer",
    ...r?.selected ? {
      color: `${a.vars.palette.text.primary} !important`
    } : {
      color: `${a.vars.palette.text.secondary} !important`
    }
  }),
  /**
   * Popover Styles
   */
  popover: ({ theme: a }) => ({
    "&&& .MuiPaper-root": {
      borderRadius: a.vars.size.borderRadius.r2,
      overflow: "auto",
      maxHeight: 200
    }
  })
};
export {
  f as tabsNavigatorStyles
};
