import { keyframes as n } from "@emotion/css";
import { genComponentStyleHook as e } from "../../utils/cssinjs/index.mjs";
function r() {
  const t = n`
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  `, o = n`
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  `;
  return [t, o];
}
const s = (t) => {
  const [o, i] = r(), { componentCls: a } = t;
  return {
    [a]: {
      position: "fixed",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      [`${a}__mask`]: {
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        color: "#000",
        transform: "translateZ(0)"
      },
      [`${a}__mask--disabled`]: {
        color: "transparent"
      },
      [`${a}__mask-inner`]: {
        width: "100%",
        height: "100%",
        backgroundColor: "currentcolor",
        opacity: t.maskOpacity
      },
      [`${a}-fade`]: {
        "&-enter-active": {
          animationName: o,
          animationDuration: t.maskAnimationDuration
        },
        "&-leave-active": {
          animationName: i,
          animationDuration: t.maskAnimationDuration
        }
      }
    }
  };
}, p = e(
  "Mask",
  (t) => [s(t)],
  { maskAnimationDuration: "0.25s", maskOpacity: 0.45 },
  {
    skipUnit: ["maskOpacity"]
  }
);
export {
  p as default,
  r as genFadeKeyFrames,
  s as genMaskStyle
};
