@lets-events/react 12.2.1 → 12.2.3

package/src/components/RichEditor/styledComponents.ts

@@ -1,1151 +1,1152 @@
-import { styled } from "../../styles";
-
-export const QuillContainer = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const QuillEditor = styled("div", {
-  // Base container
-  "& .ql-container": {
-    boxSizing: "border-box",
-    fontFamily: "Helvetica, Arial, sans-serif",
-    fontSize: "13px",
-    height: "100%",
-    margin: 0,
-    position: "relative",
-    border: "1px solid $neutral300",
-    borderTop: "none",
-    borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm",
-  },
-
-  "& .ql-container.ql-disabled .ql-tooltip": {
-    visibility: "hidden",
-  },
-
-  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui": {
-    cursor: "pointer",
-  },
-
-  // Clipboard
-  "& .ql-clipboard": {
-    left: "-100000px",
-    height: "1px",
-    overflowY: "hidden",
-    position: "absolute",
-    top: "50%",
-  },
-
-  "& .ql-clipboard p": {
-    margin: 0,
-    padding: 0,
-  },
-
-  // Editor
-  "& .ql-editor": {
-    boxSizing: "border-box",
-    counterReset: "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
-    lineHeight: "1.42",
-    height: "100%",
-    outline: "none",
-    overflowY: "auto",
-    padding: "$12",
-    tabSize: 4,
-    MozTabSize: 4,
-    textAlign: "left",
-    whiteSpace: "pre-wrap",
-    wordWrap: "break-word",
-    minHeight: "200px",
-    fontSize: "$14",
-    fontFamily: "$default",
-    color: "$neutral900",
-    backgroundColor: "$white",
-    border: "none",
-    cursor: "text",
-    caretColor: "$primary500",
-
-    "& > *": {
-      cursor: "text",
-    },
-
-    "&:focus": {
-      borderColor: "$primary500",
-      boxShadow: "0 0 0 1px $primary500",
-    },
-
-    "& p, & ol, & pre, & blockquote, & h1, & h2, & h3, & h4, & h5, & h6": {
-      margin: 0,
-      padding: 0,
-    },
-
-    "& p": {
-      margin: "0 0 $8 0",
-    },
-
-    "& p:last-child": {
-      marginBottom: 0,
-    },
-
-    "& h1": {
-      fontSize: "2em",
-    },
-
-    "& h2": {
-      fontSize: "1.5em",
-    },
-
-    "& h3": {
-      fontSize: "1.17em",
-    },
-
-    "& h4": {
-      fontSize: "1em",
-    },
-
-    "& h5": {
-      fontSize: "0.83em",
-    },
-
-    "& h6": {
-      fontSize: "0.67em",
-    },
-
-    "& h1 span, & h1, & h2, & h2 span": {
-      lineHeight: "1.5rem",
-    },
-
-    "& table": {
-      borderCollapse: "collapse",
-      tableLayout: "fixed",
-      width: "100%",
-    },
-
-    "& td": {
-      border: "1px solid #000",
-      padding: "2px 5px",
-      outline: "none",
-    },
-
-    "& ol": {
-      paddingLeft: "1.5em",
-    },
-
-    "& li": {
-      listStyleType: "none",
-      paddingLeft: "1.5em",
-      position: "relative",
-    },
-
-    "& li > .ql-ui:before": {
-      display: "inline-block",
-      marginLeft: "-1.5em",
-      marginRight: "0.3em",
-      textAlign: "right",
-      whiteSpace: "nowrap",
-      width: "1.2em",
-    },
-
-    "& li[data-list=checked] > .ql-ui, & li[data-list=unchecked] > .ql-ui": {
-      color: "#777",
-    },
-
-    "& li[data-list=bullet] > .ql-ui:before": {
-      content: "'\\2022'",
-    },
-
-    "& li[data-list=checked] > .ql-ui:before": {
-      content: "'\\2611'",
-    },
-
-    "& li[data-list=unchecked] > .ql-ui:before": {
-      content: "'\\2610'",
-    },
-
-    "& li[data-list=ordered]": {
-      counterIncrement: "list-0",
-    },
-
-    "& li[data-list=ordered] > .ql-ui:before": {
-      content: "counter(list-0, decimal) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-1": {
-      counterIncrement: "list-1",
-    },
-
-    "& li[data-list=ordered].ql-indent-1 > .ql-ui:before": {
-      content: "counter(list-1, lower-alpha) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-2": {
-      counterIncrement: "list-2",
-    },
-
-    "& li[data-list=ordered].ql-indent-2 > .ql-ui:before": {
-      content: "counter(list-2, lower-roman) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-3": {
-      counterIncrement: "list-3",
-    },
-
-    "& li[data-list=ordered].ql-indent-3 > .ql-ui:before": {
-      content: "counter(list-3, decimal) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-4": {
-      counterIncrement: "list-4",
-    },
-
-    "& li[data-list=ordered].ql-indent-4 > .ql-ui:before": {
-      content: "counter(list-4, lower-alpha) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-5": {
-      counterIncrement: "list-5",
-    },
-
-    "& li[data-list=ordered].ql-indent-5 > .ql-ui:before": {
-      content: "counter(list-5, lower-roman) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-6": {
-      counterIncrement: "list-6",
-    },
-
-    "& li[data-list=ordered].ql-indent-6 > .ql-ui:before": {
-      content: "counter(list-6, decimal) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-7": {
-      counterIncrement: "list-7",
-    },
-
-    "& li[data-list=ordered].ql-indent-7 > .ql-ui:before": {
-      content: "counter(list-7, lower-alpha) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-8": {
-      counterIncrement: "list-8",
-    },
-
-    "& li[data-list=ordered].ql-indent-8 > .ql-ui:before": {
-      content: "counter(list-8, lower-roman) '. '",
-    },
-
-    "& li[data-list=ordered].ql-indent-9": {
-      counterIncrement: "list-9",
-    },
-
-    "& li[data-list=ordered].ql-indent-9 > .ql-ui:before": {
-      content: "counter(list-9, decimal) '. '",
-    },
-
-    // Indents
-    "& .ql-indent-1:not(.ql-direction-rtl)": {
-      paddingLeft: "3em",
-    },
-
-    "& li.ql-indent-1:not(.ql-direction-rtl)": {
-      paddingLeft: "4.5em",
-    },
-
-    "& .ql-indent-1.ql-direction-rtl.ql-align-right": {
-      paddingRight: "3em",
-    },
-
-    "& li.ql-indent-1.ql-direction-rtl.ql-align-right": {
-      paddingRight: "4.5em",
-    },
-
-    "& .ql-indent-2:not(.ql-direction-rtl)": {
-      paddingLeft: "6em",
-    },
-
-    "& li.ql-indent-2:not(.ql-direction-rtl)": {
-      paddingLeft: "7.5em",
-    },
-
-    "& .ql-indent-2.ql-direction-rtl.ql-align-right": {
-      paddingRight: "6em",
-    },
-
-    "& li.ql-indent-2.ql-direction-rtl.ql-align-right": {
-      paddingRight: "7.5em",
-    },
-
-    "& .ql-indent-3:not(.ql-direction-rtl)": {
-      paddingLeft: "9em",
-    },
-
-    "& li.ql-indent-3:not(.ql-direction-rtl)": {
-      paddingLeft: "10.5em",
-    },
-
-    "& .ql-indent-3.ql-direction-rtl.ql-align-right": {
-      paddingRight: "9em",
-    },
-
-    "& li.ql-indent-3.ql-direction-rtl.ql-align-right": {
-      paddingRight: "10.5em",
-    },
-
-    "& .ql-indent-4:not(.ql-direction-rtl)": {
-      paddingLeft: "12em",
-    },
-
-    "& li.ql-indent-4:not(.ql-direction-rtl)": {
-      paddingLeft: "13.5em",
-    },
-
-    "& .ql-indent-4.ql-direction-rtl.ql-align-right": {
-      paddingRight: "12em",
-    },
-
-    "& li.ql-indent-4.ql-direction-rtl.ql-align-right": {
-      paddingRight: "13.5em",
-    },
-
-    "& .ql-indent-5:not(.ql-direction-rtl)": {
-      paddingLeft: "15em",
-    },
-
-    "& li.ql-indent-5:not(.ql-direction-rtl)": {
-      paddingLeft: "16.5em",
-    },
-
-    "& .ql-indent-5.ql-direction-rtl.ql-align-right": {
-      paddingRight: "15em",
-    },
-
-    "& li.ql-indent-5.ql-direction-rtl.ql-align-right": {
-      paddingRight: "16.5em",
-    },
-
-    "& .ql-indent-6:not(.ql-direction-rtl)": {
-      paddingLeft: "18em",
-    },
-
-    "& li.ql-indent-6:not(.ql-direction-rtl)": {
-      paddingLeft: "19.5em",
-    },
-
-    "& .ql-indent-6.ql-direction-rtl.ql-align-right": {
-      paddingRight: "18em",
-    },
-
-    "& li.ql-indent-6.ql-direction-rtl.ql-align-right": {
-      paddingRight: "19.5em",
-    },
-
-    "& .ql-indent-7:not(.ql-direction-rtl)": {
-      paddingLeft: "21em",
-    },
-
-    "& li.ql-indent-7:not(.ql-direction-rtl)": {
-      paddingLeft: "22.5em",
-    },
-
-    "& .ql-indent-7.ql-direction-rtl.ql-align-right": {
-      paddingRight: "21em",
-    },
-
-    "& li.ql-indent-7.ql-direction-rtl.ql-align-right": {
-      paddingRight: "22.5em",
-    },
-
-    "& .ql-indent-8:not(.ql-direction-rtl)": {
-      paddingLeft: "24em",
-    },
-
-    "& li.ql-indent-8:not(.ql-direction-rtl)": {
-      paddingLeft: "25.5em",
-    },
-
-    "& .ql-indent-8.ql-direction-rtl.ql-align-right": {
-      paddingRight: "24em",
-    },
-
-    "& li.ql-indent-8.ql-direction-rtl.ql-align-right": {
-      paddingRight: "25.5em",
-    },
-
-    "& .ql-indent-9:not(.ql-direction-rtl)": {
-      paddingLeft: "27em",
-    },
-
-    "& li.ql-indent-9:not(.ql-direction-rtl)": {
-      paddingLeft: "28.5em",
-    },
-
-    "& .ql-indent-9.ql-direction-rtl.ql-align-right": {
-      paddingRight: "27em",
-    },
-
-    "& li.ql-indent-9.ql-direction-rtl.ql-align-right": {
-      paddingRight: "28.5em",
-    },
-
-    "& li.ql-direction-rtl": {
-      paddingRight: "1.5em",
-    },
-
-    "& li.ql-direction-rtl > .ql-ui:before": {
-      marginLeft: "0.3em",
-      marginRight: "-1.5em",
-      textAlign: "left",
-    },
-
-    // Code blocks
-    "& .ql-code-block-container": {
-      fontFamily: "monospace",
-      backgroundColor: "#23241f",
-      color: "#f8f8f2",
-      overflow: "visible",
-      marginBottom: "5px",
-      marginTop: "5px",
-      padding: "5px 10px",
-    },
-
-    // Video
-    "& .ql-video": {
-      display: "block",
-      maxWidth: "100%",
-    },
-
-    "& .ql-video.ql-align-center": {
-      margin: "0 auto",
-    },
-
-    "& .ql-video.ql-align-right": {
-      margin: "0 0 0 auto",
-    },
-
-    // Colors
-    "& .ql-bg-black": {
-      backgroundColor: "#000",
-    },
-
-    "& .ql-bg-red": {
-      backgroundColor: "#e60000",
-    },
-
-    "& .ql-bg-orange": {
-      backgroundColor: "#f90",
-    },
-
-    "& .ql-bg-yellow": {
-      backgroundColor: "#ff0",
-    },
-
-    "& .ql-bg-green": {
-      backgroundColor: "#008a00",
-    },
-
-    "& .ql-bg-blue": {
-      backgroundColor: "#06c",
-    },
-
-    "& .ql-bg-purple": {
-      backgroundColor: "#93f",
-    },
-
-    "& .ql-color-white": {
-      color: "#fff",
-    },
-
-    "& .ql-color-red": {
-      color: "#e60000",
-    },
-
-    "& .ql-color-orange": {
-      color: "#f90",
-    },
-
-    "& .ql-color-yellow": {
-      color: "#ff0",
-    },
-
-    "& .ql-color-green": {
-      color: "#008a00",
-    },
-
-    "& .ql-color-blue": {
-      color: "#06c",
-    },
-
-    "& .ql-color-purple": {
-      color: "#93f",
-    },
-
-    // Fonts
-    "& .ql-font-serif": {
-      fontFamily: "Georgia, Times New Roman, serif",
-    },
-
-    "& .ql-font-monospace": {
-      fontFamily: "Monaco, Courier New, monospace",
-    },
-
-    // Sizes
-    "& .ql-size-small": {
-      fontSize: "0.75em",
-    },
-
-    "& .ql-size-large": {
-      fontSize: "1.5em",
-    },
-
-    "& .ql-size-huge": {
-      fontSize: "2.5em",
-    },
-
-    // Direction
-    "& .ql-direction-rtl": {
-      direction: "rtl",
-      textAlign: "inherit",
-    },
-
-    // Alignment
-    "& .ql-align-center": {
-      textAlign: "center",
-    },
-
-    "& .ql-align-justify": {
-      textAlign: "justify",
-    },
-
-    "& .ql-align-right": {
-      textAlign: "right",
-    },
-
-    // UI
-    "& .ql-ui": {
-      position: "absolute",
-    },
-
-    // Formats
-    "& strong": {
-      fontWeight: "bold",
-    },
-
-    "& em": {
-      fontStyle: "italic",
-    },
-
-    "& u": {
-      textDecoration: "underline",
-    },
-
-    "& s": {
-      textDecoration: "line-through",
-    },
-
-    "& a": {
-      textDecoration: "underline",
-      color: "#06c",
-    },
-
-    "& blockquote": {
-      borderLeft: "4px solid #ccc",
-      marginBottom: "5px",
-      marginTop: "5px",
-      paddingLeft: "16px",
-    },
-
-    "& code": {
-      backgroundColor: "#f0f0f0",
-      borderRadius: "3px",
-      fontSize: "85%",
-      padding: "2px 4px",
-    },
-
-    "& pre": {
-      backgroundColor: "#f0f0f0",
-      borderRadius: "3px",
-      padding: "5px 10px",
-      whiteSpace: "pre-wrap",
-    },
-
-    "& img": {
-      maxWidth: "100%",
-    },
-
-    "& .ql-cursor": {
-      borderLeft: "2px solid $primary500",
-    },
-  },
-
-  "&.ql-blank::before": {
-    color: "rgba(0, 0, 0, 0.6)",
-    content: "attr(data-placeholder)",
-    fontStyle: "italic",
-    left: "15px",
-    pointerEvents: "none",
-    position: "absolute",
-    right: "15px",
-  },
-
-  // Toolbar
-  "& .ql-toolbar, &.ql-toolbar": {
-    backgroundColor: "$grey100",
-    border: "1px solid $neutral300",
-    borderBottom: "none",
-    borderTopLeftRadius: "$sm",
-    borderTopRightRadius: "$sm",
-    padding: "$8 $12",
-    boxSizing: "border-box",
-    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
-
-    "&::after": {
-      clear: "both",
-      content: "''",
-      display: "table",
-    },
-
-    "& button": {
-      background: "none",
-      border: "none",
-      cursor: "pointer",
-      display: "inline-block",
-      float: "left",
-      height: "24px",
-      padding: "3px 5px",
-      width: "28px",
-
-      "& svg": {
-        float: "left",
-        height: "100%",
-      },
-
-      "&:active:hover": {
-        outline: "none",
-      },
-
-      "&:hover, &:focus, &.ql-active": {
-        color: "#06c",
-
-        "& .ql-fill, & .ql-stroke.ql-fill": {
-          fill: "#06c",
-        },
-
-        "& .ql-stroke, & .ql-stroke-miter": {
-          stroke: "#06c",
-        },
-      },
-    },
-
-    "& input.ql-image[type=file]": {
-      display: "none",
-    },
-
-    "& .ql-formats": {
-      display: "inline-block",
-      verticalAlign: "middle",
-      marginRight: "15px",
-
-      "&::after": {
-        clear: "both",
-        content: "''",
-        display: "table",
-      },
-    },
-
-    "& .ql-picker-label": {
-      border: "1px solid transparent",
-
-      "&:hover, &.ql-active": {
-        color: "#06c",
-
-        "& .ql-fill": {
-          fill: "#06c",
-        },
-
-        "& .ql-stroke": {
-          stroke: "#06c",
-        },
-      },
-    },
-
-    "& .ql-picker-options": {
-      border: "1px solid transparent",
-      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px",
-    },
-
-    "& .ql-picker.ql-expanded .ql-picker-label": {
-      borderColor: "#ccc",
-
-      "& .ql-fill": {
-        fill: "#ccc",
-      },
-
-      "& .ql-stroke": {
-        stroke: "#ccc",
-      },
-    },
-
-    "& .ql-picker.ql-expanded .ql-picker-options": {
-      borderColor: "#ccc",
-    },
-
-    "& .ql-picker-item": {
-      "&:hover, &.ql-selected": {
-        color: "#06c",
-
-        "& .ql-fill, & .ql-stroke.ql-fill": {
-          fill: "#06c",
-        },
-
-        "& .ql-stroke, & .ql-stroke-miter": {
-          stroke: "#06c",
-        },
-      },
-    },
-
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
-  },
-
-  "@media (pointer: coarse)": {
-    "& .ql-toolbar button:hover:not(.ql-active)": {
-      color: "#444",
-
-      "& .ql-fill, & .ql-stroke.ql-fill": {
-        fill: "#444",
-      },
-
-      "& .ql-stroke, & .ql-stroke-miter": {
-        stroke: "#444",
-      },
-    },
-  },
-
-  // Snow theme
-  "&, & *": {
-    boxSizing: "border-box",
-  },
-
-  "& .ql-hidden": {
-    display: "none",
-  },
-
-  "& .ql-out-bottom, & .ql-out-top": {
-    visibility: "hidden",
-  },
-
-  "& .ql-tooltip": {
-    position: "absolute",
-    transform: "translateY(10px)",
-    backgroundColor: "#fff",
-    border: "1px solid #ccc",
-    boxShadow: "0 0 5px #ddd",
-    color: "#444",
-    padding: "5px 12px",
-    whiteSpace: "nowrap",
-
-    "& a": {
-      cursor: "pointer",
-      textDecoration: "none",
-      lineHeight: "26px",
-      color: "#06c",
-    },
-
-    "&.ql-flip": {
-      transform: "translateY(-10px)",
-    },
-
-    "&::before": {
-      content: "'Visit URL:'",
-      lineHeight: "26px",
-      marginRight: "8px",
-    },
-
-    "& input[type=text]": {
-      display: "none",
-      border: "1px solid #ccc",
-      fontSize: "13px",
-      height: "26px",
-      margin: 0,
-      padding: "3px 5px",
-      width: "170px",
-    },
-
-    "& a.ql-preview": {
-      display: "inline-block",
-      maxWidth: "200px",
-      overflowX: "hidden",
-      textOverflow: "ellipsis",
-      verticalAlign: "top",
-    },
-
-    "& a.ql-action::after": {
-      borderRight: "1px solid #ccc",
-      content: "'Edit'",
-      marginLeft: "16px",
-      paddingRight: "8px",
-    },
-
-    "& a.ql-remove::before": {
-      content: "'Remove'",
-      marginLeft: "8px",
-    },
-
-    "&.ql-editing a.ql-preview, &.ql-editing a.ql-remove": {
-      display: "none",
-    },
-
-    "&.ql-editing input[type=text]": {
-      display: "inline-block",
-    },
-
-    "&.ql-editing a.ql-action::after": {
-      borderRight: 0,
-      content: "'Save'",
-      paddingRight: 0,
-    },
-
-    "&[data-mode=link]::before": {
-      content: "'Enter link:'",
-    },
-
-    "&[data-mode=formula]::before": {
-      content: "'Enter formula:'",
-    },
-
-    "&[data-mode=video]::before": {
-      content: "'Enter video:'",
-    },
-  },
-
-  // Stroke and fill
-  "& .ql-stroke": {
-    fill: "none",
-    stroke: "#444",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "2",
-  },
-
-  "& .ql-stroke-miter": {
-    fill: "none",
-    stroke: "#444",
-    strokeMiterlimit: "10",
-    strokeWidth: "2",
-  },
-
-  "& .ql-fill, & .ql-stroke.ql-fill": {
-    fill: "#444",
-  },
-
-  "& .ql-empty": {
-    fill: "none",
-  },
-
-  "& .ql-even": {
-    fillRule: "evenodd",
-  },
-
-  "& .ql-thin, & .ql-stroke.ql-thin": {
-    strokeWidth: "1",
-  },
-
-  "& .ql-transparent": {
-    opacity: 0.4,
-  },
-
-  // Direction
-  "& .ql-direction svg:last-child": {
-    display: "none",
-  },
-
-  "& .ql-direction.ql-active svg:last-child": {
-    display: "inline",
-  },
-
-  "& .ql-direction.ql-active svg:first-child": {
-    display: "none",
-  },
-
-  // Picker
-  "& .ql-picker": {
-    color: "#444",
-    display: "inline-block",
-    float: "left",
-    fontSize: "14px",
-    fontWeight: "500",
-    height: "24px",
-    position: "relative",
-    verticalAlign: "middle",
-  },
-
-  "& .ql-picker-label": {
-    cursor: "pointer",
-    display: "inline-block",
-    height: "100%",
-    paddingLeft: "8px",
-    paddingRight: "2px",
-    position: "relative",
-    width: "100%",
-
-    "&::before": {
-      display: "inline-block",
-      lineHeight: "22px",
-    },
-  },
-
-  "& .ql-picker-options": {
-    backgroundColor: "#fff",
-    display: "none",
-    minWidth: "100%",
-    padding: "4px 8px",
-    position: "absolute",
-    whiteSpace: "nowrap",
-
-    "& .ql-picker-item": {
-      cursor: "pointer",
-      display: "block",
-      paddingBottom: "5px",
-      paddingTop: "5px",
-    },
-  },
-
-  "& .ql-picker.ql-expanded": {
-    "& .ql-picker-label": {
-      color: "#ccc",
-      zIndex: 2,
-    },
-
-    "& .ql-picker-options": {
-      display: "block",
-      marginTop: "-1px",
-      top: "100%",
-      zIndex: 1,
-    },
-  },
-
-  "& .ql-color-picker, & .ql-icon-picker": {
-    width: "28px",
-
-    "& .ql-picker-label": {
-      padding: "2px 4px",
-
-      "& svg": {
-        right: "4px",
-      },
-    },
-  },
-
-  "& .ql-icon-picker .ql-picker-options": {
-    padding: "4px 0",
-  },
-
-  "& .ql-icon-picker .ql-picker-item": {
-    height: "24px",
-    width: "24px",
-    padding: "2px 4px",
-  },
-
-  "& .ql-color-picker .ql-picker-options": {
-    padding: "3px 5px",
-    width: "152px",
-  },
-
-  "& .ql-color-picker .ql-picker-item": {
-    border: "1px solid transparent",
-    float: "left",
-    height: "16px",
-    margin: "2px",
-    padding: 0,
-    width: "16px",
-  },
-
-  "& .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg": {
-    position: "absolute",
-    marginTop: "-9px",
-    right: 0,
-    top: "50%",
-    width: "18px",
-  },
-
-  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before": {
-    content: "attr(data-label)",
-  },
-
-  // Header picker
-  "& .ql-picker.ql-header": {
-    width: "98px",
-
-    "& .ql-picker-label::before, & .ql-picker-item::before": {
-      content: "'Normal'",
-    },
-
-    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before": {
-      content: "'Título 1'",
-    },
-
-    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
-      content: "'Título 2'",
-    },
-
-    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before": {
-      content: "'Heading 3'",
-    },
-
-    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before": {
-      content: "'Heading 4'",
-    },
-
-    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before": {
-      content: "'Heading 5'",
-    },
-
-    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before": {
-      content: "'Heading 6'",
-    },
-
-    "& .ql-picker-item[data-value='1']::before": {
-      fontSize: "2em",
-    },
-
-    "& .ql-picker-item[data-value='2']::before": {
-      fontSize: "1.5em",
-    },
-
-    "& .ql-picker-item[data-value='3']::before": {
-      fontSize: "1.17em",
-    },
-
-    "& .ql-picker-item[data-value='4']::before": {
-      fontSize: "1em",
-    },
-
-    "& .ql-picker-item[data-value='5']::before": {
-      fontSize: "0.83em",
-    },
-
-    "& .ql-picker-item[data-value='6']::before": {
-      fontSize: "0.67em",
-    },
-  },
-
-  // Font picker
-  "& .ql-picker.ql-font": {
-    width: "108px",
-
-    "& .ql-picker-label::before, & .ql-picker-item::before": {
-      content: "'Sans Serif'",
-    },
-
-    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before": {
-      content: "'Serif'",
-    },
-
-    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before": {
-      content: "'Monospace'",
-    },
-
-    "& .ql-picker-item[data-value=serif]::before": {
-      fontFamily: "Georgia, Times New Roman, serif",
-    },
-
-    "& .ql-picker-item[data-value=monospace]::before": {
-      fontFamily: "Monaco, Courier New, monospace",
-    },
-  },
-
-  // Size picker
-  "& .ql-picker.ql-size": {
-    width: "98px",
-
-    "& .ql-picker-label::before, & .ql-picker-item::before": {
-      content: "'Normal'",
-    },
-
-    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before": {
-      content: "'Small'",
-    },
-
-    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before": {
-      content: "'Large'",
-    },
-
-    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before": {
-      content: "'Huge'",
-    },
-
-    "& .ql-picker-item[data-value=small]::before": {
-      fontSize: "10px",
-    },
-
-    "& .ql-picker-item[data-value=large]::before": {
-      fontSize: "18px",
-    },
-
-    "& .ql-picker-item[data-value=huge]::before": {
-      fontSize: "32px",
-    },
-  },
-
-  // Color picker items
-  "& .ql-color-picker.ql-background .ql-picker-item": {
-    backgroundColor: "#fff",
-  },
-
-  "& .ql-color-picker.ql-color .ql-picker-item": {
-    backgroundColor: "#000",
-  },
-
-  // Code block container
-  "& .ql-code-block-container": {
-    position: "relative",
-
-    "& .ql-ui": {
-      right: "5px",
-      top: "5px",
-    },
-  },
-
-  // Toolbar snow adjustments
-  "&.ql-toolbar, & .ql-toolbar.ql-snow": {
-    border: "1px solid #ccc",
-    boxSizing: "border-box",
-    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
-    padding: "8px",
-
-    "& .ql-formats": {
-      marginRight: "15px",
-    },
-
-    "& .ql-picker-label": {
-      border: "1px solid transparent",
-    },
-
-    "& .ql-picker-options": {
-      border: "1px solid transparent",
-      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px",
-    },
-
-    "& .ql-picker.ql-expanded .ql-picker-label": {
-      borderColor: "#ccc",
-    },
-
-    "& .ql-picker.ql-expanded .ql-picker-options": {
-      borderColor: "#ccc",
-    },
-
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
-  },
-
-  "& .ql-toolbar.ql-snow + .ql-container.ql-snow": {
-    borderTop: 0,
-  },
-
-  // Container snow
-  "& .ql-container.ql-snow": {
-    border: "1px solid #ccc",
-  },
+import { styled } from "../../styles";
+
+export const QuillContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const QuillEditor = styled("div", {
+  // Base container
+  "& .ql-container": {
+    boxSizing: "border-box",
+    fontFamily: "Helvetica, Arial, sans-serif",
+    fontSize: "13px",
+    height: "100%",
+    margin: 0,
+    position: "relative",
+    border: "1px solid $neutral300",
+    borderTop: "none",
+    borderBottomLeftRadius: "$sm",
+    borderBottomRightRadius: "$sm",
+  },
+
+  "& .ql-container.ql-disabled .ql-tooltip": {
+    visibility: "hidden",
+  },
+
+  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui": {
+    cursor: "pointer",
+  },
+
+  // Clipboard
+  "& .ql-clipboard": {
+    left: "-100000px",
+    height: "1px",
+    overflowY: "hidden",
+    position: "absolute",
+    top: "50%",
+  },
+
+  "& .ql-clipboard p": {
+    margin: 0,
+    padding: 0,
+  },
+
+  // Editor
+  "& .ql-editor": {
+    boxSizing: "border-box",
+    counterReset: "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
+    lineHeight: "1.42",
+    height: "100%",
+    outline: "none",
+    overflowY: "auto",
+    padding: "$12",
+    tabSize: 4,
+    MozTabSize: 4,
+    textAlign: "left",
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    minHeight: "200px",
+    fontSize: "$14",
+    fontFamily: "$default",
+    color: "$neutral900",
+    backgroundColor: "$white",
+    border: "none",
+    cursor: "text",
+    caretColor: "$primary500",
+
+    "& > *": {
+      cursor: "text",
+    },
+
+    "&:focus": {
+      borderColor: "$primary500",
+      boxShadow: "0 0 0 1px $primary500",
+    },
+
+    "& p, & ol, & pre, & blockquote, & h1, & h2, & h3, & h4, & h5, & h6": {
+      margin: 0,
+      padding: 0,
+    },
+
+    "& p": {
+      margin: "0 0 $8 0",
+    },
+
+    "& p:last-child": {
+      marginBottom: 0,
+    },
+
+    "& h1": {
+      fontSize: "2em",
+      lineHeight: '2em!important',
+    },
+
+    "& h2": {
+      fontSize: "1.5em",
+    },
+
+    "& h3": {
+      fontSize: "1.17em",
+    },
+
+    "& h4": {
+      fontSize: "1em",
+    },
+
+    "& h5": {
+      fontSize: "0.83em",
+    },
+
+    "& h6": {
+      fontSize: "0.67em",
+    },
+
+    "& h1 span, & h1, & h2, & h2 span": {
+      lineHeight: "1.5rem",
+    },
+
+    "& table": {
+      borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+    },
+
+    "& td": {
+      border: "1px solid #000",
+      padding: "2px 5px",
+      outline: "none",
+    },
+
+    "& ol": {
+      paddingLeft: "1.5em",
+    },
+
+    "& li": {
+      listStyleType: "none",
+      paddingLeft: "1.5em",
+      position: "relative",
+    },
+
+    "& li > .ql-ui:before": {
+      display: "inline-block",
+      marginLeft: "-1.5em",
+      marginRight: "0.3em",
+      textAlign: "right",
+      whiteSpace: "nowrap",
+      width: "1.2em",
+    },
+
+    "& li[data-list=checked] > .ql-ui, & li[data-list=unchecked] > .ql-ui": {
+      color: "#777",
+    },
+
+    "& li[data-list=bullet] > .ql-ui:before": {
+      content: "'\\2022'",
+    },
+
+    "& li[data-list=checked] > .ql-ui:before": {
+      content: "'\\2611'",
+    },
+
+    "& li[data-list=unchecked] > .ql-ui:before": {
+      content: "'\\2610'",
+    },
+
+    "& li[data-list=ordered]": {
+      counterIncrement: "list-0",
+    },
+
+    "& li[data-list=ordered] > .ql-ui:before": {
+      content: "counter(list-0, decimal) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-1": {
+      counterIncrement: "list-1",
+    },
+
+    "& li[data-list=ordered].ql-indent-1 > .ql-ui:before": {
+      content: "counter(list-1, lower-alpha) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-2": {
+      counterIncrement: "list-2",
+    },
+
+    "& li[data-list=ordered].ql-indent-2 > .ql-ui:before": {
+      content: "counter(list-2, lower-roman) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-3": {
+      counterIncrement: "list-3",
+    },
+
+    "& li[data-list=ordered].ql-indent-3 > .ql-ui:before": {
+      content: "counter(list-3, decimal) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-4": {
+      counterIncrement: "list-4",
+    },
+
+    "& li[data-list=ordered].ql-indent-4 > .ql-ui:before": {
+      content: "counter(list-4, lower-alpha) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-5": {
+      counterIncrement: "list-5",
+    },
+
+    "& li[data-list=ordered].ql-indent-5 > .ql-ui:before": {
+      content: "counter(list-5, lower-roman) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-6": {
+      counterIncrement: "list-6",
+    },
+
+    "& li[data-list=ordered].ql-indent-6 > .ql-ui:before": {
+      content: "counter(list-6, decimal) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-7": {
+      counterIncrement: "list-7",
+    },
+
+    "& li[data-list=ordered].ql-indent-7 > .ql-ui:before": {
+      content: "counter(list-7, lower-alpha) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-8": {
+      counterIncrement: "list-8",
+    },
+
+    "& li[data-list=ordered].ql-indent-8 > .ql-ui:before": {
+      content: "counter(list-8, lower-roman) '. '",
+    },
+
+    "& li[data-list=ordered].ql-indent-9": {
+      counterIncrement: "list-9",
+    },
+
+    "& li[data-list=ordered].ql-indent-9 > .ql-ui:before": {
+      content: "counter(list-9, decimal) '. '",
+    },
+
+    // Indents
+    "& .ql-indent-1:not(.ql-direction-rtl)": {
+      paddingLeft: "3em",
+    },
+
+    "& li.ql-indent-1:not(.ql-direction-rtl)": {
+      paddingLeft: "4.5em",
+    },
+
+    "& .ql-indent-1.ql-direction-rtl.ql-align-right": {
+      paddingRight: "3em",
+    },
+
+    "& li.ql-indent-1.ql-direction-rtl.ql-align-right": {
+      paddingRight: "4.5em",
+    },
+
+    "& .ql-indent-2:not(.ql-direction-rtl)": {
+      paddingLeft: "6em",
+    },
+
+    "& li.ql-indent-2:not(.ql-direction-rtl)": {
+      paddingLeft: "7.5em",
+    },
+
+    "& .ql-indent-2.ql-direction-rtl.ql-align-right": {
+      paddingRight: "6em",
+    },
+
+    "& li.ql-indent-2.ql-direction-rtl.ql-align-right": {
+      paddingRight: "7.5em",
+    },
+
+    "& .ql-indent-3:not(.ql-direction-rtl)": {
+      paddingLeft: "9em",
+    },
+
+    "& li.ql-indent-3:not(.ql-direction-rtl)": {
+      paddingLeft: "10.5em",
+    },
+
+    "& .ql-indent-3.ql-direction-rtl.ql-align-right": {
+      paddingRight: "9em",
+    },
+
+    "& li.ql-indent-3.ql-direction-rtl.ql-align-right": {
+      paddingRight: "10.5em",
+    },
+
+    "& .ql-indent-4:not(.ql-direction-rtl)": {
+      paddingLeft: "12em",
+    },
+
+    "& li.ql-indent-4:not(.ql-direction-rtl)": {
+      paddingLeft: "13.5em",
+    },
+
+    "& .ql-indent-4.ql-direction-rtl.ql-align-right": {
+      paddingRight: "12em",
+    },
+
+    "& li.ql-indent-4.ql-direction-rtl.ql-align-right": {
+      paddingRight: "13.5em",
+    },
+
+    "& .ql-indent-5:not(.ql-direction-rtl)": {
+      paddingLeft: "15em",
+    },
+
+    "& li.ql-indent-5:not(.ql-direction-rtl)": {
+      paddingLeft: "16.5em",
+    },
+
+    "& .ql-indent-5.ql-direction-rtl.ql-align-right": {
+      paddingRight: "15em",
+    },
+
+    "& li.ql-indent-5.ql-direction-rtl.ql-align-right": {
+      paddingRight: "16.5em",
+    },
+
+    "& .ql-indent-6:not(.ql-direction-rtl)": {
+      paddingLeft: "18em",
+    },
+
+    "& li.ql-indent-6:not(.ql-direction-rtl)": {
+      paddingLeft: "19.5em",
+    },
+
+    "& .ql-indent-6.ql-direction-rtl.ql-align-right": {
+      paddingRight: "18em",
+    },
+
+    "& li.ql-indent-6.ql-direction-rtl.ql-align-right": {
+      paddingRight: "19.5em",
+    },
+
+    "& .ql-indent-7:not(.ql-direction-rtl)": {
+      paddingLeft: "21em",
+    },
+
+    "& li.ql-indent-7:not(.ql-direction-rtl)": {
+      paddingLeft: "22.5em",
+    },
+
+    "& .ql-indent-7.ql-direction-rtl.ql-align-right": {
+      paddingRight: "21em",
+    },
+
+    "& li.ql-indent-7.ql-direction-rtl.ql-align-right": {
+      paddingRight: "22.5em",
+    },
+
+    "& .ql-indent-8:not(.ql-direction-rtl)": {
+      paddingLeft: "24em",
+    },
+
+    "& li.ql-indent-8:not(.ql-direction-rtl)": {
+      paddingLeft: "25.5em",
+    },
+
+    "& .ql-indent-8.ql-direction-rtl.ql-align-right": {
+      paddingRight: "24em",
+    },
+
+    "& li.ql-indent-8.ql-direction-rtl.ql-align-right": {
+      paddingRight: "25.5em",
+    },
+
+    "& .ql-indent-9:not(.ql-direction-rtl)": {
+      paddingLeft: "27em",
+    },
+
+    "& li.ql-indent-9:not(.ql-direction-rtl)": {
+      paddingLeft: "28.5em",
+    },
+
+    "& .ql-indent-9.ql-direction-rtl.ql-align-right": {
+      paddingRight: "27em",
+    },
+
+    "& li.ql-indent-9.ql-direction-rtl.ql-align-right": {
+      paddingRight: "28.5em",
+    },
+
+    "& li.ql-direction-rtl": {
+      paddingRight: "1.5em",
+    },
+
+    "& li.ql-direction-rtl > .ql-ui:before": {
+      marginLeft: "0.3em",
+      marginRight: "-1.5em",
+      textAlign: "left",
+    },
+
+    // Code blocks
+    "& .ql-code-block-container": {
+      fontFamily: "monospace",
+      backgroundColor: "#23241f",
+      color: "#f8f8f2",
+      overflow: "visible",
+      marginBottom: "5px",
+      marginTop: "5px",
+      padding: "5px 10px",
+    },
+
+    // Video
+    "& .ql-video": {
+      display: "block",
+      maxWidth: "100%",
+    },
+
+    "& .ql-video.ql-align-center": {
+      margin: "0 auto",
+    },
+
+    "& .ql-video.ql-align-right": {
+      margin: "0 0 0 auto",
+    },
+
+    // Colors
+    "& .ql-bg-black": {
+      backgroundColor: "#000",
+    },
+
+    "& .ql-bg-red": {
+      backgroundColor: "#e60000",
+    },
+
+    "& .ql-bg-orange": {
+      backgroundColor: "#f90",
+    },
+
+    "& .ql-bg-yellow": {
+      backgroundColor: "#ff0",
+    },
+
+    "& .ql-bg-green": {
+      backgroundColor: "#008a00",
+    },
+
+    "& .ql-bg-blue": {
+      backgroundColor: "#06c",
+    },
+
+    "& .ql-bg-purple": {
+      backgroundColor: "#93f",
+    },
+
+    "& .ql-color-white": {
+      color: "#fff",
+    },
+
+    "& .ql-color-red": {
+      color: "#e60000",
+    },
+
+    "& .ql-color-orange": {
+      color: "#f90",
+    },
+
+    "& .ql-color-yellow": {
+      color: "#ff0",
+    },
+
+    "& .ql-color-green": {
+      color: "#008a00",
+    },
+
+    "& .ql-color-blue": {
+      color: "#06c",
+    },
+
+    "& .ql-color-purple": {
+      color: "#93f",
+    },
+
+    // Fonts
+    "& .ql-font-serif": {
+      fontFamily: "Georgia, Times New Roman, serif",
+    },
+
+    "& .ql-font-monospace": {
+      fontFamily: "Monaco, Courier New, monospace",
+    },
+
+    // Sizes
+    "& .ql-size-small": {
+      fontSize: "0.75em",
+    },
+
+    "& .ql-size-large": {
+      fontSize: "1.5em",
+    },
+
+    "& .ql-size-huge": {
+      fontSize: "2.5em",
+    },
+
+    // Direction
+    "& .ql-direction-rtl": {
+      direction: "rtl",
+      textAlign: "inherit",
+    },
+
+    // Alignment
+    "& .ql-align-center": {
+      textAlign: "center",
+    },
+
+    "& .ql-align-justify": {
+      textAlign: "justify",
+    },
+
+    "& .ql-align-right": {
+      textAlign: "right",
+    },
+
+    // UI
+    "& .ql-ui": {
+      position: "absolute",
+    },
+
+    // Formats
+    "& strong": {
+      fontWeight: "bold",
+    },
+
+    "& em": {
+      fontStyle: "italic",
+    },
+
+    "& u": {
+      textDecoration: "underline",
+    },
+
+    "& s": {
+      textDecoration: "line-through",
+    },
+
+    "& a": {
+      textDecoration: "underline",
+      color: "#06c",
+    },
+
+    "& blockquote": {
+      borderLeft: "4px solid #ccc",
+      marginBottom: "5px",
+      marginTop: "5px",
+      paddingLeft: "16px",
+    },
+
+    "& code": {
+      backgroundColor: "#f0f0f0",
+      borderRadius: "3px",
+      fontSize: "85%",
+      padding: "2px 4px",
+    },
+
+    "& pre": {
+      backgroundColor: "#f0f0f0",
+      borderRadius: "3px",
+      padding: "5px 10px",
+      whiteSpace: "pre-wrap",
+    },
+
+    "& img": {
+      maxWidth: "100%",
+    },
+
+    "& .ql-cursor": {
+      borderLeft: "2px solid $primary500",
+    },
+  },
+
+  "&.ql-blank::before": {
+    color: "rgba(0, 0, 0, 0.6)",
+    content: "attr(data-placeholder)",
+    fontStyle: "italic",
+    left: "15px",
+    pointerEvents: "none",
+    position: "absolute",
+    right: "15px",
+  },
+
+  // Toolbar
+  "& .ql-toolbar, &.ql-toolbar": {
+    backgroundColor: "$grey100",
+    border: "1px solid $neutral300",
+    borderBottom: "none",
+    borderTopLeftRadius: "$sm",
+    borderTopRightRadius: "$sm",
+    padding: "$8 $12",
+    boxSizing: "border-box",
+    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+
+    "&::after": {
+      clear: "both",
+      content: "''",
+      display: "table",
+    },
+
+    "& button": {
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      display: "inline-block",
+      float: "left",
+      height: "24px",
+      padding: "3px 5px",
+      width: "28px",
+
+      "& svg": {
+        float: "left",
+        height: "100%",
+      },
+
+      "&:active:hover": {
+        outline: "none",
+      },
+
+      "&:hover, &:focus, &.ql-active": {
+        color: "#06c",
+
+        "& .ql-fill, & .ql-stroke.ql-fill": {
+          fill: "#06c",
+        },
+
+        "& .ql-stroke, & .ql-stroke-miter": {
+          stroke: "#06c",
+        },
+      },
+    },
+
+    "& input.ql-image[type=file]": {
+      display: "none",
+    },
+
+    "& .ql-formats": {
+      display: "inline-block",
+      verticalAlign: "middle",
+      marginRight: "15px",
+
+      "&::after": {
+        clear: "both",
+        content: "''",
+        display: "table",
+      },
+    },
+
+    "& .ql-picker-label": {
+      border: "1px solid transparent",
+
+      "&:hover, &.ql-active": {
+        color: "#06c",
+
+        "& .ql-fill": {
+          fill: "#06c",
+        },
+
+        "& .ql-stroke": {
+          stroke: "#06c",
+        },
+      },
+    },
+
+    "& .ql-picker-options": {
+      border: "1px solid transparent",
+      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px",
+    },
+
+    "& .ql-picker.ql-expanded .ql-picker-label": {
+      borderColor: "#ccc",
+
+      "& .ql-fill": {
+        fill: "#ccc",
+      },
+
+      "& .ql-stroke": {
+        stroke: "#ccc",
+      },
+    },
+
+    "& .ql-picker.ql-expanded .ql-picker-options": {
+      borderColor: "#ccc",
+    },
+
+    "& .ql-picker-item": {
+      "&:hover, &.ql-selected": {
+        color: "#06c",
+
+        "& .ql-fill, & .ql-stroke.ql-fill": {
+          fill: "#06c",
+        },
+
+        "& .ql-stroke, & .ql-stroke-miter": {
+          stroke: "#06c",
+        },
+      },
+    },
+
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
+      borderColor: "#000",
+    },
+  },
+
+  "@media (pointer: coarse)": {
+    "& .ql-toolbar button:hover:not(.ql-active)": {
+      color: "#444",
+
+      "& .ql-fill, & .ql-stroke.ql-fill": {
+        fill: "#444",
+      },
+
+      "& .ql-stroke, & .ql-stroke-miter": {
+        stroke: "#444",
+      },
+    },
+  },
+
+  // Snow theme
+  "&, & *": {
+    boxSizing: "border-box",
+  },
+
+  "& .ql-hidden": {
+    display: "none",
+  },
+
+  "& .ql-out-bottom, & .ql-out-top": {
+    visibility: "hidden",
+  },
+
+  "& .ql-tooltip": {
+    position: "absolute",
+    transform: "translateY(10px)",
+    backgroundColor: "#fff",
+    border: "1px solid #ccc",
+    boxShadow: "0 0 5px #ddd",
+    color: "#444",
+    padding: "5px 12px",
+    whiteSpace: "nowrap",
+
+    "& a": {
+      cursor: "pointer",
+      textDecoration: "none",
+      lineHeight: "26px",
+      color: "#06c",
+    },
+
+    "&.ql-flip": {
+      transform: "translateY(-10px)",
+    },
+
+    "&::before": {
+      content: "'Visit URL:'",
+      lineHeight: "26px",
+      marginRight: "8px",
+    },
+
+    "& input[type=text]": {
+      display: "none",
+      border: "1px solid #ccc",
+      fontSize: "13px",
+      height: "26px",
+      margin: 0,
+      padding: "3px 5px",
+      width: "170px",
+    },
+
+    "& a.ql-preview": {
+      display: "inline-block",
+      maxWidth: "200px",
+      overflowX: "hidden",
+      textOverflow: "ellipsis",
+      verticalAlign: "top",
+    },
+
+    "& a.ql-action::after": {
+      borderRight: "1px solid #ccc",
+      content: "'Edit'",
+      marginLeft: "16px",
+      paddingRight: "8px",
+    },
+
+    "& a.ql-remove::before": {
+      content: "'Remove'",
+      marginLeft: "8px",
+    },
+
+    "&.ql-editing a.ql-preview, &.ql-editing a.ql-remove": {
+      display: "none",
+    },
+
+    "&.ql-editing input[type=text]": {
+      display: "inline-block",
+    },
+
+    "&.ql-editing a.ql-action::after": {
+      borderRight: 0,
+      content: "'Save'",
+      paddingRight: 0,
+    },
+
+    "&[data-mode=link]::before": {
+      content: "'Enter link:'",
+    },
+
+    "&[data-mode=formula]::before": {
+      content: "'Enter formula:'",
+    },
+
+    "&[data-mode=video]::before": {
+      content: "'Enter video:'",
+    },
+  },
+
+  // Stroke and fill
+  "& .ql-stroke": {
+    fill: "none",
+    stroke: "#444",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+  },
+
+  "& .ql-stroke-miter": {
+    fill: "none",
+    stroke: "#444",
+    strokeMiterlimit: "10",
+    strokeWidth: "2",
+  },
+
+  "& .ql-fill, & .ql-stroke.ql-fill": {
+    fill: "#444",
+  },
+
+  "& .ql-empty": {
+    fill: "none",
+  },
+
+  "& .ql-even": {
+    fillRule: "evenodd",
+  },
+
+  "& .ql-thin, & .ql-stroke.ql-thin": {
+    strokeWidth: "1",
+  },
+
+  "& .ql-transparent": {
+    opacity: 0.4,
+  },
+
+  // Direction
+  "& .ql-direction svg:last-child": {
+    display: "none",
+  },
+
+  "& .ql-direction.ql-active svg:last-child": {
+    display: "inline",
+  },
+
+  "& .ql-direction.ql-active svg:first-child": {
+    display: "none",
+  },
+
+  // Picker
+  "& .ql-picker": {
+    color: "#444",
+    display: "inline-block",
+    float: "left",
+    fontSize: "14px",
+    fontWeight: "500",
+    height: "24px",
+    position: "relative",
+    verticalAlign: "middle",
+  },
+
+  "& .ql-picker-label": {
+    cursor: "pointer",
+    display: "inline-block",
+    height: "100%",
+    paddingLeft: "8px",
+    paddingRight: "2px",
+    position: "relative",
+    width: "100%",
+
+    "&::before": {
+      display: "inline-block",
+      lineHeight: "22px",
+    },
+  },
+
+  "& .ql-picker-options": {
+    backgroundColor: "#fff",
+    display: "none",
+    minWidth: "100%",
+    padding: "4px 8px",
+    position: "absolute",
+    whiteSpace: "nowrap",
+
+    "& .ql-picker-item": {
+      cursor: "pointer",
+      display: "block",
+      paddingBottom: "5px",
+      paddingTop: "5px",
+    },
+  },
+
+  "& .ql-picker.ql-expanded": {
+    "& .ql-picker-label": {
+      color: "#ccc",
+      zIndex: 2,
+    },
+
+    "& .ql-picker-options": {
+      display: "block",
+      marginTop: "-1px",
+      top: "100%",
+      zIndex: 1,
+    },
+  },
+
+  "& .ql-color-picker, & .ql-icon-picker": {
+    width: "28px",
+
+    "& .ql-picker-label": {
+      padding: "2px 4px",
+
+      "& svg": {
+        right: "4px",
+      },
+    },
+  },
+
+  "& .ql-icon-picker .ql-picker-options": {
+    padding: "4px 0",
+  },
+
+  "& .ql-icon-picker .ql-picker-item": {
+    height: "24px",
+    width: "24px",
+    padding: "2px 4px",
+  },
+
+  "& .ql-color-picker .ql-picker-options": {
+    padding: "3px 5px",
+    width: "152px",
+  },
+
+  "& .ql-color-picker .ql-picker-item": {
+    border: "1px solid transparent",
+    float: "left",
+    height: "16px",
+    margin: "2px",
+    padding: 0,
+    width: "16px",
+  },
+
+  "& .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg": {
+    position: "absolute",
+    marginTop: "-9px",
+    right: 0,
+    top: "50%",
+    width: "18px",
+  },
+
+  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before": {
+    content: "attr(data-label)",
+  },
+
+  // Header picker
+  "& .ql-picker.ql-header": {
+    width: "98px",
+
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Normal'",
+    },
+
+    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before": {
+      content: "'Título 1'",
+    },
+
+    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
+      content: "'Título 2'",
+    },
+
+    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before": {
+      content: "'Heading 3'",
+    },
+
+    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before": {
+      content: "'Heading 4'",
+    },
+
+    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before": {
+      content: "'Heading 5'",
+    },
+
+    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before": {
+      content: "'Heading 6'",
+    },
+
+    "& .ql-picker-item[data-value='1']::before": {
+      fontSize: "2em",
+    },
+
+    "& .ql-picker-item[data-value='2']::before": {
+      fontSize: "1.5em",
+    },
+
+    "& .ql-picker-item[data-value='3']::before": {
+      fontSize: "1.17em",
+    },
+
+    "& .ql-picker-item[data-value='4']::before": {
+      fontSize: "1em",
+    },
+
+    "& .ql-picker-item[data-value='5']::before": {
+      fontSize: "0.83em",
+    },
+
+    "& .ql-picker-item[data-value='6']::before": {
+      fontSize: "0.67em",
+    },
+  },
+
+  // Font picker
+  "& .ql-picker.ql-font": {
+    width: "108px",
+
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Sans Serif'",
+    },
+
+    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before": {
+      content: "'Serif'",
+    },
+
+    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before": {
+      content: "'Monospace'",
+    },
+
+    "& .ql-picker-item[data-value=serif]::before": {
+      fontFamily: "Georgia, Times New Roman, serif",
+    },
+
+    "& .ql-picker-item[data-value=monospace]::before": {
+      fontFamily: "Monaco, Courier New, monospace",
+    },
+  },
+
+  // Size picker
+  "& .ql-picker.ql-size": {
+    width: "98px",
+
+    "& .ql-picker-label::before, & .ql-picker-item::before": {
+      content: "'Normal'",
+    },
+
+    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before": {
+      content: "'Small'",
+    },
+
+    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before": {
+      content: "'Large'",
+    },
+
+    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before": {
+      content: "'Huge'",
+    },
+
+    "& .ql-picker-item[data-value=small]::before": {
+      fontSize: "10px",
+    },
+
+    "& .ql-picker-item[data-value=large]::before": {
+      fontSize: "18px",
+    },
+
+    "& .ql-picker-item[data-value=huge]::before": {
+      fontSize: "32px",
+    },
+  },
+
+  // Color picker items
+  "& .ql-color-picker.ql-background .ql-picker-item": {
+    backgroundColor: "#fff",
+  },
+
+  "& .ql-color-picker.ql-color .ql-picker-item": {
+    backgroundColor: "#000",
+  },
+
+  // Code block container
+  "& .ql-code-block-container": {
+    position: "relative",
+
+    "& .ql-ui": {
+      right: "5px",
+      top: "5px",
+    },
+  },
+
+  // Toolbar snow adjustments
+  "&.ql-toolbar, & .ql-toolbar.ql-snow": {
+    border: "1px solid #ccc",
+    boxSizing: "border-box",
+    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+    padding: "8px",
+
+    "& .ql-formats": {
+      marginRight: "15px",
+    },
+
+    "& .ql-picker-label": {
+      border: "1px solid transparent",
+    },
+
+    "& .ql-picker-options": {
+      border: "1px solid transparent",
+      boxShadow: "rgba(0, 0, 0, 0.2) 0 2px 8px",
+    },
+
+    "& .ql-picker.ql-expanded .ql-picker-label": {
+      borderColor: "#ccc",
+    },
+
+    "& .ql-picker.ql-expanded .ql-picker-options": {
+      borderColor: "#ccc",
+    },
+
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
+      borderColor: "#000",
+    },
+  },
+
+  "& .ql-toolbar.ql-snow + .ql-container.ql-snow": {
+    borderTop: 0,
+  },
+
+  // Container snow
+  "& .ql-container.ql-snow": {
+    border: "1px solid #ccc",
+  },
 });