.ProseMirror {
	outline: none;
	padding: 2em;
	/* border: 1px solid #777; */
	border-radius: 2px;
	position: relative;
}
.wrap-widget {
	user-select: none;
	position: relative;
	/* background: red; */
	/* width: 1px; */
	height: 1px;
	button {
		cursor: pointer;
		position: absolute;
		left: 0px;
		top: -4px;
		padding: 1px 4px;
		font-size: 12px;
		color: #777;
		border: 0px;
		border-bottom: 1px solid #777;
		background: transparent;
		border-radius: 2px 2px 0px 0px;
		&:hover {
			background: #e7e7e7;
		}
		&.contextDoc,
		&.contextAtom {
			left: -5px;
		}
	}
}
.inline-wrap-widget {
	user-select: none;
	position: relative;
	/* background: red; */
	/* width: 100%; */
	/* height: 100%; */
	span {
		position: absolute;
		top: 0px;
		left: -1px;
		background: rgba(255, 0, 0, 0.3);
		width: 100%;
		height: calc(100% - 1px);
		border-left: 1px solid #777;
		/* border-top: 1px solid #777; */
		display: block;
	}
}

.editor-disabled {
	.wrap-widget,
	.inline-wrap-widget {
		button {
			pointer-events: none;
		}
	}
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.ProseMirror p,
.ProseMirror .codeblock-wrapper,
.ProseMirror math-display,
.ProseMirror blockquote,
.ProseMirror img,
.ProseMirror figure,
.ProseMirror figcaption,
.ProseMirror hr,
.ProseMirror ul,
.ProseMirror ol,
.ProseMirror li,
.ProseMirror section,
.ProseMirror .tableWrapper,
.ProseMirror figure,
.ProseMirror figure > div.title,
.ProseMirror figure > figcaption {
	border-left: 1px solid #777;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.ProseMirror tr * {
	border: none;
}
.ProseMirror tr p {
	margin: 0;
}

.ProseMirror section {
	margin-left: -5px;
}

.ProseMirror a,
.ProseMirror math-inline,
.ProseMirror code,
.ProseMirror strong,
.ProseMirror s,
.ProseMirror sup,
.ProseMirror sub,
.ProseMirror u,
.ProseMirror em {
	border-top: 1px solid #777;
	padding-left: 1px;
	margin-left: -1px;
}

.ProseMirror h1 {
	font-size: 2em;
	font-weight: bold;
}
.ProseMirror h2 {
	font-size: 1.5em;
	font-weight: bold;
}
.ProseMirror h3 {
	font-size: 1.3em;
	font-weight: bold;
}
.ProseMirror h4 {
	font-size: 1em;
	font-weight: bold;
}
.ProseMirror h5 {
	font-size: 0.8em;
	font-weight: bold;
}
.ProseMirror h6 {
	font-size: 0.7em;
}
.ProseMirror .dataset {
	display: block;
	max-height: 300px;
	overflow: scroll;
	position: relative;
}
.ProseMirror blockquote {
	padding-left: 1rem;
	border-left: solid 4px rgba(181, 181, 181, 0.5);
}
.ProseMirror math-inline {
	/* Otherwise the widget button is too hard to click without triggering math */
	padding-left: 4px;
}
.ProseMirror ol {
	list-style-type: decimal;
}
.ProseMirror ul {
	list-style-type: disc;
}

/* Code block */
.ProseMirror .codeblock-select-wrapper {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 100;
	opacity: 0;
	transition: all 0.3s ease;
}
.ProseMirror .codeblock-root {
	position: relative;
	border-width: 0;
}
.ProseMirror .codeblock-root:hover .codeblock-select-wrapper {
	opacity: 1;
}
.ProseMirror .codeblock-wrapper {
	margin-bottom: 16px;
}

/* Media upload https://github.com/transloadit/uppy/issues/1127#issuecomment-2130708834 */
.uppy-Dashboard-inner {
	height: 182px; /* Ensure it takes 100% of its parent container's height */
	min-height: unset; /* Remove the default min-height */
}

/* Table */
.ProseMirror table {
	border-spacing: 0;
	border-collapse: separate;
	font-size: 0.9em;
	font-family: sans-serif;
	min-width: 400px;
	width: 100%;
	table-layout: fixed;
	overflow: hidden;
}

.ProseMirror table td,
.ProseMirror table th {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.ProseMirror table td:last-child,
.ProseMirror table th:last-child {
	border-right: 1px solid #ccc;
}

.ProseMirror table tr:last-child td {
	border-bottom: 1px solid #ccc;
}

.ProseMirror table td {
	vertical-align: top;
}

.wrap-widget + table {
	position: relative;
	top: -1px;
}

.ProseMirror thead tr {
	text-align: left;
}

.ProseMirror figure {
	padding: 1em;
}

.ProseMirror .tableWrapper {
	overflow-x: auto;
}

/*
The columnResizing plugin inserts an extra .tableWrapper element immediately
before the actual table. I'm unsure why this happens, but this code hides it:
*/
.ProseMirror .tableWrapper:has(+ .tableWrapper) {
	display: none;
}

.ProseMirror td,
.ProseMirror th {
	vertical-align: top;
	box-sizing: border-box;
	position: relative;
}

.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
	/* if there's no explicit width set and the column is not being resized, set a default width */
	min-width: var(--default-cell-min-width);
}

.ProseMirror .column-resize-handle {
	position: absolute;
	right: -2px;
	top: 0;
	bottom: 0;
	width: 4px;
	z-index: 20;
	background-color: #adf;
	pointer-events: none;
}

.ProseMirror.resize-cursor {
	cursor: col-resize;
}