@use 'sass:math';

:root {
	--text-editor-max-width: 670px
}

.modal-container .text-editor {
	position: absolute;
}

.ProseMirror-hideselection {
	caret-color: transparent;
	color: var(--color-main-text);

	*::selection {
		background: transparent;
		color: var(--color-main-text);
	}

	*::-moz-selection {
		background: transparent;
		color: var(--color-main-text);
	}
}

.ProseMirror-selectednode {
	outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */
li.ProseMirror-selectednode {
	outline: none;

	&:after {
		content: '';
		position: absolute;
		left: -32px;
		right: -2px; top: -2px; bottom: -2px;
		border: 2px solid #8cf;
		pointer-events: none;
	}
}

.has-conflicts,
.text-editor__wrapper.icon-loading {
	.ProseMirror-menubar {
		display: none;
	}
}

.ProseMirror-gapcursor {
	display: none;
	pointer-events: none;
	position: absolute;

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: -2px;
		width: 20px;
		border-top: 1px solid var(--color-main-text);
		animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
	}
}

@keyframes ProseMirror-cursor-blink {
	to {
		visibility: hidden;
	}
}

.animation-rotate {
	animation: rotate var(--animation-duration, 0.8s) linear infinite;
}

[data-handler='text'] {
	background-color: var(--color-main-background);
	border-top: 3px solid var(--color-primary-element);
	.modal-title {
		font-weight: bold;
	}
}

// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}


// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInLeft.css
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}