/*– ProseMirror color variables */

$pm-yellow-1: cc7; $pm-yellow-2: ffc; $pm-grey-1: $gray-200; $pm-grey-2: $gray-300; $pm-grey-3: $gray-400; $pm-grey-5: $gray-600; $pm-cyan: $cyan;

.ProseMirror {

position: relative;

}

.ProseMirror {

white-space: pre-wrap;

}

.ProseMirror ul, .ProseMirror ol {

padding-left: 30px;
cursor: default;

}

.ProseMirror blockquote {

padding-left: 1em;
border-left: 3px solid $gray-300;
margin-left: 0; margin-right: 0;

}

.ProseMirror pre {

white-space: pre-wrap;

}

.ProseMirror li {

position: relative;
pointer-events: none; /* Don't do weird stuff with marker clicks */

} .ProseMirror li > * {

pointer-events: auto;

}

.ProseMirror-nodeselection *::selection, .ProseMirror-widget *::selection { background: transparent; } .ProseMirror-nodeselection *::-moz-selection, .ProseMirror-widget *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {

outline: 2px solid $pm-cyan;

}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {

outline: none;

}

li.ProseMirror-selectednode:after {

content: "";
position: absolute;
left: -32px;
right: -2px; top: -2px; bottom: -2px;
border: 2px solid $pm-cyan;
pointer-events: none;

}

.ProseMirror-textblock-dropdown {

min-width: 3em;

}

.ProseMirror-menu {

margin: 0 -4px;
line-height: 1;

}

.ProseMirror-tooltip .ProseMirror-menu {

width: -webkit-fit-content;
width: fit-content;
white-space: pre;

}

.ProseMirror-menuitem {

margin-right: 3px;
display: inline-block;

}

.ProseMirror-menuseparator {

border-right: 1px solid $pm-grey-3;
margin-right: 3px;

}

.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {

font-size: 90%;
white-space: nowrap;

}

.ProseMirror-menu-dropdown {

vertical-align: 1px;
cursor: pointer;

}

.ProseMirror-menu-dropdown-wrap {

padding: 1px 14px 1px 4px;
display: inline-block;
position: relative;

}

.ProseMirror-menu-dropdown:after {

content: "";
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
opacity: .6;
position: absolute;
right: 2px;
top: calc(50% - 2px);

}

.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {

position: absolute;
background: white;
color: $pm-grey-5;
border: 1px solid #aaa;
padding: 2px;

}

.ProseMirror-menu-dropdown-menu {

z-index: 15;
min-width: 6em;

}

.ProseMirror-menu-dropdown-item {

cursor: pointer;
padding: 2px 8px 2px 4px;

}

.ProseMirror-menu-dropdown-item:hover {

background: $pm-grey-1;

}

.ProseMirror-menu-submenu-wrap {

position: relative;
margin-right: -4px;

}

.ProseMirror-menu-submenu-label:after {

content: "";
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid currentColor;
opacity: .6;
position: absolute;
right: 4px;
top: calc(50% - 4px);

}

.ProseMirror-menu-submenu {

display: none;
min-width: 4em;
left: 100%;
top: -3px;

}

.ProseMirror-menu-active {

background: $pm-grey-2;
border-radius: 4px;

}

.ProseMirror-menu-active {

background: $pm-grey-2;
border-radius: 4px;

}

.ProseMirror-menu-disabled {

opacity: .3;

}

.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {

display: block;

}

.ProseMirror-menubar {

border-top-left-radius: inherit;
border-top-right-radius: inherit;
position: relative;
min-height: 1em;
color: $pm-grey-5;
padding: 1px 6px;
top: 0; left: 0; right: 0;
border-bottom: 1px solid silver;
background: white;
z-index: 10;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: visible;

}

.ProseMirror-icon {

display: inline-block;
line-height: .8;
vertical-align: -2px; /* Compensate for padding */
padding: 2px 8px;
cursor: pointer;

}

.ProseMirror-icon svg {

fill: currentColor;
height: 1em;

}

.ProseMirror-icon span {

vertical-align: text-top;

}

/* Add space around the hr to make clicking it easier */

.ProseMirror-example-setup-style hr {

position: relative;
height: 6px;
border: none;

}

.ProseMirror-example-setup-style hr:after {

content: "";
position: absolute;
left: 10px;
right: 10px;
top: 2px;
border-top: 2px solid silver;

}

.ProseMirror-example-setup-style img {

cursor: default;

}

.ProseMirror-example-setup-style table {

border-collapse: collapse;

}

.ProseMirror-example-setup-style td {

vertical-align: top;
border: 1px solid $pm-grey-3;
padding: 3px 5px;

}

.ProseMirror-prompt {

background: white;
padding: 5px 10px 5px 15px;
border: 1px solid silver;
position: fixed;
border-radius: 3px;
z-index: 11;
box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);

}

.ProseMirror-prompt h5 {

margin: 0;
font-weight: normal;
font-size: 100%;
color: #444;

}

.ProseMirror-prompt input, .ProseMirror-prompt textarea {

background: $pm-grey-2;
border: none;
outline: none;

}

.ProseMirror-prompt input {

padding: 0 4px;

}

.ProseMirror-prompt-close {

position: absolute;
left: 2px; top: 1px;
color: $pm-grey-5;
border: none; background: transparent; padding: 0;

}

.ProseMirror-prompt-close:after {

content: "✕";
font-size: 12px;

}

.ProseMirror-invalid {

background: $pm-yellow-2;
border: 1px solid $pm-yellow-1;
border-radius: 4px;
padding: 5px 10px;
position: absolute;
min-width: 10em;

}

.ProseMirror-prompt-buttons {

margin-top: 5px;
display: none;

}