// Icon fonts for emoji/autocomplete
@import (less) "@themes/fonts/iconFonts/diceFont.less";
@import (less) "@themes/fonts/iconFonts/elderberryInn.less";
@import (less) "@themes/fonts/iconFonts/gameIcons.less";
@import (less) "@themes/fonts/iconFonts/fontAwesome.less";

@keyframes sourceMoveAnimation {
	50% {
		color: white;
		background-color: red;
	}
	100% {
		color: unset;
		background-color: unset;
	}
}

.codeEditor {
	font-family: monospace;
	height: 100%;

	@media screen and (pointer: coarse) {
		font-size: 16px;
	}

	/* Line numbers and gutters */
	.cm-gutters {
		background-color: #f0f0f0;
		color: #555;
		border-right: 1px solid #ddd;
	}

	/* Folding gutter */
	.cm-foldGutter {
		cursor: pointer;
		color: grey;
		font-weight: 600;
		transition: background 0.1s;

		&:hover {
			background: #dddddd;
		}
	}

	/* Active line */
	.cm-activeLine {
		background-color: #f5f5f5;
	}

	.cm-activeLineGutter {
		background-color: #e0e0e0;
	}

	/* Flash animation for source moves */
	.sourceMoveFlash .cm-line {
		animation-name: sourceMoveAnimation;
		animation-duration: 0.4s;
	}

	/* Search input */
	.cm-searchField {
		width: 25em !important;
		outline: 1px inset #00000055 !important;
	}

	/* Tab character visualization (optional) */
	//.cm-tab {
	//  background: url(...) no-repeat right;
	//}

	/* Trailing space visualization (optional) */
	//.cm-trailingSpace .cm-space {
	//  background: url(...) no-repeat right;
	//}
}

/* Emoji preview styling */
.emojiPreview {
	font-size: 1.5em;
	line-height: 1.2em;
}