export const animationButton = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.1, ease: "easeOut" },
  },
  show: {
    opacity: 1,
    transition: { duration: 0.1, ease: "easeIn" },
  },
  exit: {
    opacity: 0.7,
    transition: { duration: 0.1, ease: "easeOut" },
  },
};

export const variantsCalendar = {
  visible: { opacity: 1, transition: { duration: 1, ease: "easeOut" } },
  hidden: { opacity: 0, transition: { duration: 1, ease: "easeOut" } },
};

export const sidebarVariants = {
  open: { x: -1, transition: { ease: "easeIn" }, width: "60px" },
  closed: { x: "-50px", transition: { ease: "easeIn" }, width: "60px" },
};

export const wideSidebarVariants = {
  open: { width: "220px", transition: { ease: "easeIn" }, x: -1 },
};

export const wideSidebarAdminVariants = {
  open: { width: "326px", transition: { ease: "easeIn" }, x: -1 },
};

export const popupAnimation = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.3, ease: "easeOut" },
  },
  show: {
    opacity: 1,
    transition: { delay: 0.15, duration: 0.2, ease: "easeIn" },
  },
  exit: {
    opacity: 0,
    transition: { duration: 0.3, ease: "easeOut" },
  },
};

export const userMenuAnimation = {
  open: {
    background: "#23242A",
    transition: { duration: 0.2, ease: "easeOut" },
  },
  closed: {
    background: "transparent",
    transition: { duration: 0.2, ease: "easeOut" },
  },
};

export const transition = { duration: 0.3, ease: "easeOut" };

export const iconAnimation = {
  open: {
    transform: "rotate(180deg)",
  },
  closed: { transform: "rotate(0deg)" },
};
