import { styled } from 'styled-components';
import { Box } from '../../atoms/box/index.js';
import { InputCSS } from '../../atoms/input/index.js';
import { Text } from '../../atoms/text/index.js';
import { cssClass, themeGet } from '../../utils/index.js';
export const EditorWrapper = styled(Text).withConfig({
  displayName: "rich-text-editorstyled__EditorWrapper",
  componentId: "sc-18ku1nx-0"
})(["position:relative;", " .ProseMirror-focused{outline:none;}.characterCount{position:absolute;bottom:", ";right:", ";color:", ";}"], InputCSS, themeGet('space', 'md'), themeGet('space', 'lg'), themeGet('colors', 'grey40'));
EditorWrapper.defaultProps = {
  px: 'xl',
  py: 'xl',
  className: cssClass('EditorWrapper')
};
export const MenuBarWrapper = styled(Box).withConfig({
  displayName: "rich-text-editorstyled__MenuBarWrapper",
  componentId: "sc-18ku1nx-1"
})(["border:1px solid ", ";border-bottom:none;& .", ":hover{cursor:pointer;}& .", " svg{stroke:", ";}& .active .", " svg{stroke:", ";}"], themeGet('colors', 'inputBorder'), cssClass('Icon'), cssClass('Icon'), themeGet('colors', 'grey100'), cssClass('Icon'), themeGet('colors', 'primary100'));
MenuBarWrapper.defaultProps = {
  px: 'md',
  py: 'md',
  className: cssClass('MenuBarWrapper')
};