import styled from "styled-components";
export var Flex = /*#__PURE__*/styled("div", {
  target: "euxlkmw0",
  label: "Flex"
})({
  display: "flex",
  height: "100vh"
});
export var Elements = /*#__PURE__*/styled("div", {
  target: "euxlkmw1",
  label: "Elements"
})({
  flex: "65%",
  backgroundColor: "var(--mdc-theme-background)",
  marginBottom: 65
});
export var ElementPreview = /*#__PURE__*/styled("div", {
  target: "euxlkmw2",
  label: "ElementPreview"
})({
  position: "relative"
});
export var ElementTitle = /*#__PURE__*/styled("div", {
  target: "euxlkmw3",
  label: "ElementTitle"
})({
  borderBottom: "1px solid var(--mdc-theme-on-background)",
  color: "var(--mdc-theme-on-surface)"
});
export var ElementBox = /*#__PURE__*/styled("div", {
  target: "euxlkmw4",
  label: "ElementBox"
})({
  minHeight: 34 // padding: "0px 2px"

});
export var ElementPreviewCanvas = /*#__PURE__*/styled("div", {
  target: "euxlkmw5",
  label: "ElementPreviewCanvas"
})({
  marginTop: 5,
  border: "1px solid var(--mdc-theme-on-background)",
  // backgroundColor: "var(--mdc-theme-surface)",
  color: "var(--mdc-theme-on-surface)",
  padding: 0,
  boxSizing: "border-box"
});
export var Backdrop = /*#__PURE__*/styled("div", {
  target: "euxlkmw6",
  label: "Backdrop"
})({
  display: "none",
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  backgroundColor: "var(--mdc-theme-surface)",
  opacity: 0.5
});
export var AddBlock = /*#__PURE__*/styled("div", {
  target: "euxlkmw7",
  label: "AddBlock"
})({
  display: "none",
  width: 300,
  margin: 5,
  textAlign: "center" //marginTop: 45

});
export var Overlay = /*#__PURE__*/styled("div", {
  target: "euxlkmw8",
  label: "Overlay"
})({
  position: "absolute",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  top: 42,
  left: 0,
  width: "100%",
  height: "calc(100% - 42px)",
  zIndex: 10,
  opacity: 0,
  transform: "scale(0.9)",
  transition: "opacity 0.2s, transform 0.1s",
  "&:hover": {
    opacity: 1,
    transform: "scale(1)",
    "> .backdrop, > .add-block": {
      display: "block"
    }
  }
});
//# sourceMappingURL=StyledComponents.js.map