import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import * as React from 'react';
import { css, cx } from '@emotion/css';
var verticalLine = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  content: '';\n  position: absolute;\n  top: 0;\n  height: var(--tree-line-height);\n  box-sizing: border-box;\n"])));
var childrenContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-inline-start: 0;\n  margin: 0;\n  padding-top: var(--tree-line-height);\n  position: relative;\n\n  ::before {\n    ", ";\n    left: 50%;\n    width: 0;\n    border-left: var(--tree-line-width) var(--tree-node-line-style)\n      var(--tree-line-color);\n  }\n"])), verticalLine);
var node = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  flex: auto;\n  text-align: center;\n  list-style-type: none;\n  position: relative;\n  padding: var(--tree-line-height) var(--tree-node-padding) 0\n    var(--tree-node-padding);\n"])));
var nodeLines = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ::before,\n  ::after {\n    ", ";\n    right: 50%;\n    width: 50%;\n    border-top: var(--tree-line-width) var(--tree-node-line-style)\n      var(--tree-line-color);\n  }\n  ::after {\n    left: 50%;\n    border-left: var(--tree-line-width) var(--tree-node-line-style)\n      var(--tree-line-color);\n  }\n\n  :only-of-type {\n    padding: 0;\n    ::after,\n    :before {\n      display: none;\n    }\n  }\n\n  :first-of-type {\n    ::before {\n      border: 0 none;\n    }\n    ::after {\n      border-radius: var(--tree-line-border-radius) 0 0 0;\n    }\n  }\n\n  :last-of-type {\n    ::before {\n      border-right: var(--tree-line-width) var(--tree-node-line-style)\n        var(--tree-line-color);\n      border-radius: 0 var(--tree-line-border-radius) 0 0;\n    }\n    ::after {\n      border: 0 none;\n    }\n  }\n"])), verticalLine);

function TreeNode(_ref) {
  var children = _ref.children,
      label = _ref.label,
      className = _ref.className;
  return /*#__PURE__*/React.createElement("li", {
    className: cx(node, nodeLines, className)
  }, label, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("ul", {
    className: childrenContainer
  }, children));
}

export default TreeNode;