import styled from "styled-components";
import { css } from "emotion";
export var List = /*#__PURE__*/styled("div", {
  target: "esw31cl0",
  label: "List"
})({
  position: "fixed",
  top: 64,
  left: 0,
  width: "100%",
  height: "100%",
  //overflow: "scroll",
  backgroundColor: "#fff",
  zIndex: 10000
});
export var Input = /*#__PURE__*/styled("div", {
  target: "esw31cl1",
  label: "Input"
})({
  backgroundColor: "var(--mdc-theme-on-background)",
  position: "relative",
  height: 30,
  padding: 3,
  width: "100%",
  borderRadius: 2,
  "> input": {
    border: "none",
    fontSize: 16,
    width: "calc(100% - 10px)",
    height: "100%",
    marginLeft: 50,
    backgroundColor: "transparent",
    outline: "none",
    color: "var(--mdc-theme-text-primary-on-background)"
  }
});
export var searchIcon = /*#__PURE__*/css({
  "&.mdc-button__icon": {
    color: "var(--mdc-theme-text-secondary-on-background)",
    position: "absolute",
    width: 24,
    height: 24,
    left: 15,
    top: 7
  }
}, "label:searchIcon;");
export var wrapper = /*#__PURE__*/css({
  height: "100vh",
  //overflow: "scroll",
  backgroundColor: "var(--mdc-theme-background)"
}, "label:wrapper;");
export var BlockList = /*#__PURE__*/styled("div", {
  target: "esw31cl2",
  label: "BlockList"
})({
  display: "flex",
  padding: 50,
  justifyContent: "space-around",
  maxWidth: 1200,
  margin: "0 auto",
  flexWrap: "wrap",
  color: "var(--mdc-theme-text-secondary-on-background)"
});
export var BlockPreview = /*#__PURE__*/styled("div", {
  target: "esw31cl3",
  label: "BlockPreview"
})({
  pointerEvents: "none",
  display: "flex",
  width: "100%",
  height: "100%",
  alignItems: "center",
  justifyContent: "center",
  position: "relative",
  backgroundColor: "#fff"
});
export var blockStyle = /*#__PURE__*/css({
  position: "relative",
  width: "100%",
  maxWidth: 800,
  boxSizing: "border-box",
  overflow: "hidden",
  border: "1px solid var(--mdc-theme-on-background)",
  backgroundColor: "var(--mdc-theme-surface)",
  padding: "15px 15px 35px 15px",
  marginBottom: 25
}, "label:blockStyle;");
export var Backdrop = /*#__PURE__*/styled("div", {
  target: "esw31cl4",
  label: "Backdrop"
})({
  display: "none",
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  backgroundColor: "#000",
  opacity: 0.5
});
export var AddBlock = /*#__PURE__*/styled("div", {
  target: "esw31cl5",
  label: "AddBlock"
})({
  display: "none",
  width: 300,
  margin: 5,
  textAlign: "center"
});
export var DeleteBlock = /*#__PURE__*/styled("div", {
  target: "esw31cl6",
  label: "DeleteBlock"
})({
  margin: 5,
  textAlign: "center",
  position: "absolute",
  top: 0,
  right: 0,
  zIndex: 100,
  cursor: "pointer",
  color: "white"
});
export var EditBlock = /*#__PURE__*/styled("div", {
  target: "esw31cl7",
  label: "EditBlock"
})({
  margin: 5,
  textAlign: "center",
  position: "absolute",
  top: 0,
  left: 0,
  zIndex: 100,
  cursor: "pointer",
  color: "white"
});
export var Overlay = /*#__PURE__*/styled("div", {
  target: "esw31cl8",
  label: "Overlay"
})({
  position: "absolute",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  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"
    }
  }
});
export var Title = /*#__PURE__*/styled("div", {
  target: "esw31cl9",
  label: "Title"
})({
  position: "absolute",
  left: 15,
  bottom: 0
});
//# sourceMappingURL=StyledComponents.js.map