import { DYNAMIC_FILTER_KEY_COMPONENT as t } from "../../components/DynamicFilter/constants.js";
import { DYNAMIC_SORT_KEY_COMPONENT as e } from "../../components/DynamicSort/constants.js";
const r = {
  /**
   * Estilos para los leftActions
   */
  stackLeftActions: ({ theme: a }) => ({
    width: "fit-content",
    gap: a.vars.size.baseSpacings.sp1,
    display: "flex",
    alignItems: "center"
  }),
  /**
   * Estilos para el Stack que contiene los componentes de filtro y ordenamiento
   */
  stackCustomHeader: ({ theme: a, ownerState: i }) => ({
    flexDirection: a.generalSettings.isMobile ? "column" : "row",
    gap: a.vars.size.baseSpacings.sp3,
    height: "auto",
    alignItems: "center",
    [`& [class*="${t}-root"]`]: {
      display: i?.showDynamicFilter ? "block" : "none",
      // flex-basis: 0 prevents the DynamicFilter root's own width:100% from
      // acting as flex-basis, which would create a CSS layout cycle with
      // container-type:inline-size (the container query needs inline size but
      // that depends on width:100% which depends on parent — browser resolves
      // the cycle incorrectly on the first pass, reporting 0 or stale width).
      flex: "1 1 0%",
      minWidth: 0
    },
    [`& [class*="${e}-root"]`]: {
      display: i?.showDynamicSort ? "block" : "none",
      flex: "1 1 0%",
      minWidth: 0
    }
  }),
  /**
   * Estilos para el Stack que contiene los componentes de filtro y ordenamiento
   */
  stackRightActions: ({ theme: a }) => ({
    alignItems: "center",
    gap: a.vars.size.baseSpacings.sp3,
    width: "fit-content"
  }),
  /**
   * Estilos para el botón de refresh
   */
  actionRefresh: ({ theme: a, ownerState: i }) => ({
    ...i?.isDirty ? {
      animation: "changeBgColor 0.9s ease infinite",
      "& .M4LIcon-icon": {
        background: `${a.vars.palette.primary.main} !important`
      }
    } : null,
    //Create and apply animation with change background color red and green
    "@keyframes changeBgColor": {
      "0%": {
        background: a.vars.palette.primary.hoverOpacity
      },
      "50%": {
        background: a.vars.palette.primary.activeOpacity
      },
      "100%": {
        background: a.vars.palette.primary.hoverOpacity
      }
    }
  })
};
export {
  r as dynamicFilterAndSortStyles
};
