import { keyframes as t } from "@emotion/css";
import { genComponentStyleHook as i } from "../../utils/cssinjs/index.mjs";
const c = {
  loadingBarAnimateDuration: 250
};
function s() {
  const a = t`
    0% {
      opacity: 0;
    }

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

    100% {
      opacity: 0;
    }
  `;
  return [a, n];
}
const m = (a) => {
  const [n, e] = s(), { componentCls: o, loadingBarAnimateDuration: r } = a;
  return {
    [o]: {
      position: "absolute",
      insetInlineStart: 0,
      width: "100%",
      zIndex: 1,
      [`${o}__bar`]: {
        width: "100%",
        height: "100%",
        pointerEvents: "none",
        transition: `background-color ${a.motionDurationMid} ease, transform ${a.motionDurationMid} ease`,
        willChange: "transform"
      },
      "&--default": {
        [`${a.componentCls}__bar`]: {
          background: a.colorPrimary
        }
      },
      "&--success": {
        [`${a.componentCls}__bar`]: {
          background: a.colorSuccess
        }
      },
      "&--warning": {
        [`${a.componentCls}__bar`]: {
          background: a.colorWarn
        }
      },
      "&--error": {
        [`${a.componentCls}__bar`]: {
          background: a.colorError
        }
      },
      "&-fade": {
        "&-enter-active": {
          animationName: n,
          animationDuration: `${r}ms`
        },
        "&-leave-active": {
          animationName: e,
          animationDuration: `${r}ms`
        }
      }
    }
  };
}, u = i(
  "LoadingBar",
  (a) => [m(a)],
  c,
  {
    skipUnit: ["loadingBarAnimateDuration"]
  }
);
export {
  u as default,
  s as genFadeKeyFrames,
  m as genLoadingBarStyle
};
