import _defineProperty from "@babel/runtime/helpers/defineProperty";
// @ts-nocheck
import * as React from "react";
import styled from "styled-components";
import { css } from "emotion";
export var typeStyle = /*#__PURE__*/css({
  position: "relative",
  cursor: "pointer",
  ".element-holder": {
    position: "absolute",
    cursor: "pointer",
    display: "flex",
    // top: 0,
    top: -28,
    boxSizing: "border-box",
    right: 0,
    //-2,
    fontSize: 10,
    padding: 0,
    color: "#fff",
    zIndex: 30,
    width: "auto",
    "> div": {
      borderRadius: 2,
      display: "flex",
      padding: "4px 2px 4px 6px",
      alignItems: "center",
      lineHeight: "10px",
      "> svg": {
        height: 13,
        width: 13,
        marginRight: 5
      },
      "> span": {
        marginRight: 8,
        maxWidth: 160,
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        wordBreak: 'break-all'
      },
      ".mdc-icon-button": {
        width: "auto",
        height: "auto",
        padding: 0,
        fontSize: 10,
        "> svg": {
          height: 18,
          width: 18,
          color: "#fff",
          fill: "#fff",
          marginLeft: 2
        }
      }
    },
    "> svg": {
      borderRadius: 2,
      height: 13,
      padding: 4,
      marginRight: 5,
      "&.help-icon": {
        cursor: "pointer"
      }
    }
  }
}, "label:typeStyle;");
export var ElementContainer = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "e1q6cli60",
  label: "ElementContainer"
})(function (_ref) {
  var _innerWrapperT;

  var highlightId = _ref.highlightId,
      active = _ref.active,
      id = _ref.id;
  var color = active ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)";
  return {
    position: "relative",
    flex: "100%",
    padding: 0,
    opacity: 1,
    borderRadius: 2,
    boxSizing: "border-box",
    zIndex: 10,
    transition: "all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)",
    "&::after": {
      content: "''",
      position: "absolute",
      zIndex: 0,
      // previously it was set to -1, but then background images and other elements would be displayed above
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      pointerEvents: "none",
      margin: 0,
      border: active ? "1px dashed " + color : "0",
      opacity: active ? 1 : 0,
      cursor: 'pointer',
      transition: "all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
    },
    "&::after:hover": {
      opacity: 1
    },
    "&:hover": {
      "&::after": {
        border: highlightId === id ? "1px dashed " + color : 0,
        opacity: highlightId === id ? 1 : 0
      },
      // zIndex: 19,
      "> .innerWrapper > .type": {
        display: highlightId === id ? "block" : "none",
        ".background": {
          pointerEvents: !active && highlightId === id ? "auto" : "none"
        }
      }
    },
    "> .innerWrapper": {
      // position: "relative",
      width: "100%",
      height: "100%",
      // note "auto" fixes the odd hover bug which resizes the column, but causes a bug with column vertical align
      boxSizing: "border-box"
    },
    "> .innerWrapper > .type": (_innerWrapperT = {
      display: active ? "block" : "none",
      width: !active ? "100%" : 0,
      height: !active ? "100%" : 0
    }, _defineProperty(_innerWrapperT, !active ? "left" : "right", !active ? 0 : 0), _defineProperty(_innerWrapperT, "position", "absolute"), _defineProperty(_innerWrapperT, "top", 0), _defineProperty(_innerWrapperT, "zIndex", 10), _defineProperty(_innerWrapperT, "transition", "background-color 0.2s"), _defineProperty(_innerWrapperT, ".background", {
      pointerEvents: active ? "auto" : "none",
      display: !active ? "block" : "none",
      position: "absolute",
      backgroundColor: active ? "rgba(250, 87, 35, 1)" : "rgba(0, 204, 176, 0.1)",
      width: "100%",
      height: "100%",
      cursor: "pointer",
      top: 0,
      left: 0,
      transition: "background-color 0.2s"
    }), _defineProperty(_innerWrapperT, ".element-holder", {
      "> div, > svg": {
        backgroundColor: color
      }
    }), _innerWrapperT)
  };
}));
export var defaultStyle = {
  opacity: 0,
  transform: "scale(0.5)",
  transitionProperty: "opacity, transform",
  transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
  transitionDuration: "150ms",
  transitionDelay: "20ms",
  willChange: "opacity, transform"
};
export var transitionStyles = {
  entering: {
    opacity: 0,
    transform: "scale(0.5)"
  },
  entered: {
    opacity: 1,
    transform: "scale(1)"
  }
};
export var readOnlyStyles = {
  zIndex: 9
};
//# sourceMappingURL=ElementStyled.js.map