{"version":3,"file":"RichTextEditor.module.mjs","names":[],"sources":["../src/RichTextEditor.module.css"],"sourcesContent":[".root {\n  position: relative;\n  border: 1px solid;\n  border-radius: var(--mantine-radius-default);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.Typography {\n  padding: 0;\n  margin: 0;\n\n  & li > p {\n    margin: 0;\n  }\n\n  & ul li,\n  & ol li {\n    margin-top: 2px;\n  }\n\n  & p {\n    margin-bottom: 7px;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6,\n  & p {\n    margin-top: 0;\n  }\n}\n\n.content {\n  background-color: var(--mantine-color-body);\n  border-radius: var(--mantine-radius-default);\n\n  & :global(.ProseMirror) {\n    outline: 0;\n    padding: var(--mantine-spacing-md);\n  }\n\n  & :global(.ProseMirror > *:last-child) {\n    margin-bottom: 0;\n  }\n\n  & :global(.ProseMirror p.is-editor-empty:first-of-type::before) {\n    content: attr(data-placeholder);\n    pointer-events: none;\n    user-select: none;\n    float: left;\n    height: 0;\n    color: var(--mantine-color-placeholder);\n  }\n\n  & :global(div:not(.ProseMirror)) {\n    /* Position the bubble menu above the toolbar. As it doesn't have its own selector,\n    assert that the non-ProseMirror div is the bubble or floating menu */\n    z-index: 2;\n  }\n\n  & :global(pre) {\n    font-family: var(--mantine-font-family-monospace);\n    border-radius: var(--mantine-radius-default);\n    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n      color: var(--mantine-color-gray-9);\n      --code-color-comment: var(--mantine-color-gray-5);\n      --code-color-var: var(--mantine-color-red-7);\n      --code-color-number: var(--mantine-color-blue-7);\n      --code-color-title: var(--mantine-color-pink-7);\n      --code-color-keyword: var(--mantine-color-violet-7);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n      color: var(--mantine-color-dark-1);\n      --code-color-comment: var(--mantine-color-dark-2);\n      --code-color-var: var(--mantine-color-red-5);\n      --code-color-number: var(--mantine-color-cyan-5);\n      --code-color-title: var(--mantine-color-yellow-5);\n      --code-color-keyword: var(--mantine-color-violet-3);\n    }\n\n    & code {\n      background: none !important;\n      color: inherit;\n      font-size: var(--mantine-font-size-sm);\n      padding: 0;\n    }\n\n    & :global(.hljs-comment),\n    & :global(.hljs-quote) {\n      color: var(--code-color-comment);\n    }\n\n    & :global(.hljs-variable),\n    & :global(.hljs-template-variable),\n    & :global(.hljs-attribute),\n    & :global(.hljs-tag),\n    & :global(.hljs-regexp),\n    & :global(.hljs-link),\n    & :global(.hljs-name),\n    & :global(.hljs-selector-id),\n    & :global(.hljs-selector-class) {\n      color: var(--code-color-var);\n    }\n\n    & :global(.hljs-number),\n    & :global(.hljs-meta),\n    & :global(.hljs-built_in),\n    & :global(.hljs-builtin-name),\n    & :global(.hljs-literal),\n    & :global(.hljs-type),\n    & :global(.hljs-params) {\n      color: var(--code-color-number);\n    }\n\n    & :global(.hljs-string),\n    & :global(.hljs-symbol),\n    & :global(.hljs-bullet) {\n      color: var(--code-color-var);\n    }\n\n    & :global(.hljs-title),\n    & :global(.hljs-section) {\n      color: var(--code-color-title);\n    }\n\n    & :global(.hljs-keyword),\n    & :global(.hljs-selector-tag) {\n      color: var(--code-color-keyword);\n    }\n\n    & :global(.hljs-emphasis) {\n      font-style: italic;\n    }\n\n    & :global(.hljs-strong) {\n      font-weight: 700;\n    }\n  }\n}\n\n.linkEditorDropdown {\n  background-color: var(--mantine-color-body);\n}\n\n.control {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--mantine-radius-default);\n  cursor: default;\n\n  &:where([data-variant='default']) {\n    border: 1px solid;\n    min-width: 26px;\n    height: 26px;\n  }\n\n  &:where([data-variant='subtle']) {\n    --control-icon-size: 20px;\n    min-width: 32px;\n    height: 32px;\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n\n    &:where([data-variant='default']) {\n      background-color: var(--mantine-color-dark-6);\n    }\n\n    &:where([data-variant='subtle']) {\n      background-color: var(--mantine-color-dark-7);\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n  }\n\n  &:where([data-interactive]:not([data-disabled])) {\n    cursor: pointer;\n\n    @mixin hover {\n      color: var(--mantine-color-bright);\n\n      @mixin where-light {\n        &:where([data-variant='default']) {\n          background-color: var(--mantine-color-gray-0);\n        }\n\n        &:where([data-variant='subtle']) {\n          background-color: var(--mantine-color-gray-1);\n        }\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-light);\n    color: var(--mantine-primary-color-light-color);\n\n    @mixin hover {\n      background-color: var(--mantine-primary-color-light-hover);\n    }\n  }\n}\n\n.controlIcon {\n  width: var(--control-icon-size, 16px);\n  height: var(--control-icon-size, 16px);\n}\n\n.controlsGroup {\n  display: flex;\n  background-color: var(--mantine-color-body);\n\n  &:where([data-variant='default']) {\n    & :where([data-rich-text-editor-control]) {\n      border-radius: 0;\n\n      &:where(:not(:last-of-type)) {\n        border-inline-end-width: 0;\n      }\n\n      &:where(:last-of-type) {\n        border-start-end-radius: var(--mantine-radius-default);\n        border-end-end-radius: var(--mantine-radius-default);\n      }\n\n      &:where(:first-of-type) {\n        border-start-start-radius: var(--mantine-radius-default);\n        border-end-start-radius: var(--mantine-radius-default);\n      }\n    }\n  }\n}\n\n.linkEditor {\n  display: flex;\n}\n\n.linkEditorInput {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n  border-inline-end: 0;\n}\n\n.linkEditorExternalControl {\n  border: 1px solid;\n  color: var(--mantine-color-text);\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--mantine-radius-default);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-light);\n    color: var(--mantine-primary-color-filled);\n\n    @mixin hover {\n      background-color: var(--mantine-primary-color-light-hover);\n    }\n  }\n}\n\n.linkEditorSave {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--mantine-spacing-sm);\n  top: var(--rte-sticky-offset, 0px);\n  background-color: var(--mantine-color-body);\n  z-index: 1;\n  border-start-end-radius: var(--mantine-radius-default);\n  border-start-start-radius: var(--mantine-radius-default);\n  border-bottom: 1px solid;\n\n  &:where([data-variant='default']) {\n    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  }\n\n  &:where([data-variant='subtle']) {\n    padding: 4px;\n    row-gap: 0;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-sticky]) {\n    position: sticky;\n  }\n}\n\n.taskList {\n  list-style-type: none;\n  padding: 0;\n  padding-inline-start: 0;\n\n  & :where(li) {\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  & :where(li[data-checked] > div) {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  & :where(ul) {\n    margin-top: 5px;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0;\n  }\n\n  & :where(label) {\n    display: inline-block;\n  }\n\n  & :where(input) {\n    cursor: pointer;\n    appearance: none;\n    width: 18px;\n    height: 18px;\n    border: 1px solid;\n    border-radius: var(--mantine-radius-default);\n    vertical-align: middle;\n    position: relative;\n\n    @mixin where-light {\n      background-color: var(--mantine-color-white);\n      border-color: var(--mantine-color-gray-4);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n      border-color: var(--mantine-color-dark-4);\n    }\n\n    &:checked {\n      background-color: var(--mantine-primary-color-filled);\n      border-color: var(--mantine-primary-color-filled);\n\n      &::before {\n        position: absolute;\n        content: '';\n        inset: 0;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCA0LjU4NkwxLjcwNyAyLjI5M0ExIDEgMCAxMC4yOTMgMy43MDdsMyAzYS45OTcuOTk3IDAgMDAxLjQxNCAwbDUtNUExIDEgMCAxMDguMjkzLjI5M0w0IDQuNTg2eiIvPjwvc3ZnPg==');\n        background-repeat: no-repeat;\n        background-size: 10px;\n        background-position: center;\n      }\n    }\n  }\n\n  & :where(li > label) {\n    margin-inline-end: var(--mantine-spacing-sm);\n  }\n}\n"],"mappings":""}