import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
const o = (r) => {
  const { componentCls: e } = r;
  return {
    [e]: {
      display: "grid",
      gridTemplateColumns: "repeat(24, 1fr)",
      width: "100%",
      boxSizing: "border-box",
      "&-loading": {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minWidth: "200px",
        padding: "20px"
      },
      [`${e}__item`]: {
        background: "#fff",
        borderRadius: r.borderRadius,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        transition: "all 0.5s ease",
        overflow: "hidden",
        boxSizing: "border-box",
        border: `${r.lineWidth} ${r.lineType} #fff`
      },
      [`${e}--canDrag`]: {
        cursor: "pointer",
        "&:hover": {
          border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
        }
      },
      [`${e}--dragging`]: {
        cursor: "move",
        zIndex: 100,
        opacity: 1
      },
      [`${e}__dragging`]: {
        opacity: 0,
        zIndex: 999
      },
      [`${e}__overlay`]: {
        border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
      }
    }
  };
}, d = i("ApDraggableGrid", (r) => [
  o(r)
]);
export {
  d as default
};
