@import 'mediawiki.skin.variables.less';
@import './codemirror.mixins.less';

// Overrides for WikiEditor.

// NOTE: This file is included in the ext.CodeMirror.v6.init module for performance reasons.
// We need the styles for the toggle button without having to load all of ext.CodeMirror.v6.

.wikiEditor-ui-text .cm-editor {
	border: inherit;
}

// Mimics .group-search
.wikiEditor-ui-toolbar .section-advanced .group-codemirror {
	float: right;
	border-right: 0;
	border-left: @border-subtle;
}

.cm-mw-toggle-wikieditor {
	.oo-ui-icon-syntax-highlight {
		background-color: @color-base-fixed;
		// The SVG is just barely over 300 bytes, and is also only temporary
		// until an official icon has been established in Codex/OOUI (T174145).
		.embed-img( 'icon' );
	}

	&:hover {
		background-color: @background-color-interactive;
	}

	&.oo-ui-toggleWidget-on {
		.oo-ui-labelElement-label {
			color: @color-progressive;
		}

		.oo-ui-icon-syntax-highlight {
			background-color: @color-progressive;
		}
	}

	&.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child {
		margin-left: 0;
	}
}

.oo-ui-icon-wrapping {
	.embed-img( 'wrapping' );
}

.oo-ui-icon-gotoLine {
	.embed-img( 'gotoLine' );
}

.oo-ui-icon-pilcrow {
	.embed-img( 'pilcrow' );
}

.oo-ui-icon-check-all {
	.embed-img( 'check-all' );
}

.oo-ui-icon-preferences {
	.embed-img( 'preferences' );
}

.oo-ui-icon-cm-search {
	.embed-img( 'search' );
}

// Hide MediaWiki's native edit help link for consistency with CodeEditor.
// This is also hidden by WikiEditor, but only for the wikitext content model.
.client-js .editButtons .editHelp {
	display: none;
}

// Hide all buttons except CodeMirror on read only pages (T301615),
// and different content types.
// This is the same hack that CodeEditor uses to customize the toolbar.
// WikiEditor should be updated to better handle read only pages (T188817).
.wikiEditor-ui {
	&.ext-codemirror-readonly,
	&:not( .ext-codemirror-mediawiki ) {
		.wikiEditor-section-secondary,
		.group:not( .group-codemirror ):not( .group-codemirror-format ):not( .group-codemirror-preferences ):not( .group-codemirror-search ),
		.tabs,
		.sections {
			display: none;
		}
	}
}