// 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;
	}
}

:where(.codeEditor) {
	font-family: monospace;
	height: 100%;
	width:100%;

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

	.cm-gutterElement span {
		font-family : inherit;
		font-weight : 600;
		color       : grey;
		text-shadow : none;
	}

	.cm-foldGutter {
		cursor      : pointer;
		border-left : 1px solid #EEEEEE;
		transition  : background 0.1s;
		&:hover { background : #DDDDDD; }
	}

	/* 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;
}