/*
 * Citizen
 *
 * SkinStyles for Extension:CodeEditor
 * Module: jquery.codeEditor
 * Version: REL1_39 67c012c
 *
 * Date: 2022-12-15
*/

.wikiEditor-ui .ace_editor {
	font-family: var( --font-family-monospace );
}

.codeEditor-status {
	position: relative;
	width: auto; // so it won't overflow
	padding-top: 8px; // Make space for resize indicator
	padding-right: var( --space-xs );
	padding-left: var( --space-xs );
	line-height: var( --line-height-sm );
	color: var( --color-base--subtle );
	background-color: var( --color-surface-2 );
	border-top-color: var( --border-color-base );

	// HACK: Add resize indicator
	&::after {
		position: absolute;
		top: 1px; // counter border top
		right: 0;
		left: 0;
		width: 52px;
		height: 4px;
		margin: 2px auto;
		content: '';
		background: var( --color-base--subtle );
		border-radius: var( --border-radius--pill );
	}

	&-worker,
	&-line,
	&-message {
		padding: 0 var( --space-xs );
	}

	&-message {
		color: var( --color-base--emphasized );
		border-color: var( --border-color-base );
	}
}

// So that it connects with CodeEditor's status bar
.skin-citizen .mw-editform .editOptions {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}