import React, { useRef, useEffect } from "react";
import styled from "styled-components";
var Align = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "e8zautp0",
  label: "Align"
})(function (_ref) {
  var isResizing = _ref.isResizing,
      index = _ref.index;
  return {
    position: "absolute",
    left: "calc(".concat(parseInt(index) / 24 * 100, "% - 1px)"),
    top: 0,
    height: "100%",
    minHeight: 25,
    translate: "width 0.5s",
    zIndex: 30,
    width: 1,
    cursor: 'e-resize',
    borderRightWidth: 1,
    borderRightStyle: 'dashed',
    borderRightColor: "var(--mdc-theme-primary)",
    display: isResizing ? "block" : "none",
    transition: "display 0.2s, opacity 0.2s",
    opacity: isResizing ? 0.6 : 0
  };
}));
var ColContainer = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "e8zautp1",
  label: "ColContainer"
})(function (_ref2) {
  var index = _ref2.index;
  return {
    position: "relative",
    top: "50%",
    transform: "translateY(-50%)",
    left: 3,
    color: "var(--mdc-theme-primary)",
    fontSize: 12,
    zIndex: 10,
    cursor: 'e-resize'
  };
}));

var ResizeAlign = function ResizeAlign(props) {
  var alignRef = useRef({});
  useEffect(function () {
    var alignDom = alignRef.current;
    props.refs.push(alignDom);
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Align, Object.assign({
    ref: alignRef,
    className: "resize-align"
  }, props, {
    "data-type": "align-".concat(props.index)
  }), /*#__PURE__*/React.createElement(ColContainer, props, props.index)));
};

export default /*#__PURE__*/React.memo(ResizeAlign);
//# sourceMappingURL=ResizeAlign.js.map