import { jsx as B } from "react/jsx-runtime";
import { useState as y, useRef as x, useMemo as L, useEffect as M } from "react";
import { c as k, s as E, a as S, w as C } from "../tools/tools.js";
const N = function(v) {
  const {
    as: b = "div",
    className: n,
    dropOldClass: a,
    fade: i,
    style: l,
    toggle: d,
    variables: c,
    visible: t,
    ...h
  } = v, [f, m] = y(!1), [r, u] = y(!1), p = x(null), g = L(() => {
    const e = k(!a && "modal-backdrop", i && "fade", f && "show", n), s = E((o, w) => ({ tKey: S(w) }), c, l);
    return {
      className: e,
      style: s
    };
  }, [n, a, i, f, l, c]);
  return M(() => {
    if (t && !r) {
      u(!0);
      return;
    }
    const e = p.current;
    if (!e)
      return;
    const s = () => {
      t || (d || (document.body.classList.remove("overflow-hidden"), document.body.style.removeProperty("padding-right")), u(!1));
    };
    e.addEventListener("transitionend", s);
    let o;
    return t ? (document.body.style.setProperty("padding-right", C("px")), document.body.classList.add("overflow-hidden"), o = requestAnimationFrame(() => m(!0))) : m(!1), () => {
      e.removeEventListener("transitionend", s), o && cancelAnimationFrame(o);
    };
  }, [d, r, t]), r && /* @__PURE__ */ B(b, { ...h, ...g, ref: p });
};
N.displayName = "BRL.ModalBackdrop";
export {
  N as M
};
//# sourceMappingURL=modal-backdrop.js.map
