import React from "react";
import styled from "styled-components";
var Handle = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "e112jb9s0",
  label: "Handle"
})(function (_ref) {
  var active = _ref.active,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? "right" : _ref$position;
  return {
    position: "absolute",
    // left: -5,
    left: position === "right" ? "calc(100% - 5px)" : -5,
    width: 10,
    height: 10,
    top: "50%",
    transform: "translate(0, -50%)",
    // top: "10%",
    // height: "80%",
    // minHeight: 25,
    translate: "width 0.5s",
    zIndex: 30,
    // width: 10,
    // borderRadius: 10,
    // cursor: "col-resize",
    cursor: 'e-resize',
    backgroundColor: "var(--mdc-theme-primary)",
    // backgroundColor: isResizing ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
    display: active ? "block" : "none",
    transition: "background-color 0.5s" // transition: "background-color 0.5s, opacity 0.2s",
    // opacity: isResizing ? 1 : 0.2,
    // "&:hover": {
    //     opacity: 1
    // }

  };
}));

var ResizeHandle = function ResizeHandle(props) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Handle, Object.assign({
    className: "resize-handle"
  }, props)));
};

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