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

.cm-editor {
	border: @border-width-base @border-style-base @border-color-subtle;

	.cm-selectionBackground {
		background: #d9d9d9;
		.darkmode( background, #3e4450 );
	}

	// For the highlightSelectionMatches extension, only used in non-wikitext.
	.cm-selectionMatch {
		background: #f6ebeb;
		.darkmode( background, rgba(170, 254, 102, 0.1) );
	}

	&.cm-focused.cm-mw-mode-mediawiki > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
		background: #d7d4f0;
		.darkmode( background, #233 );
	}
}

.cm-scroller {
	overflow: auto;
}

.cm-matchingBracket,
.cm-focused .cm-matchingBracket {
	background-color: #eee;
	box-shadow: inset 0 0 1px 1px #999;
	font-weight: bold;

	/* Dark mode: cool / valid */
	.darkmode( background-color, rgba( 140, 170, 255, 0.35 ) );
	.darkmode( box-shadow, inset 0 0 1px 1px rgba( 140, 170, 255, 0.9 ) );
	.darkmode( color, #f0f3ff );
}

.cm-nonmatchingBracket,
.cm-focused .cm-nonmatchingBracket {
	background-color: #fdd;
	box-shadow: inset 0 0 1px 1px #a22;
	font-weight: bold;

	/* Dark mode: warm / error */
	.darkmode( background-color, rgba( 255, 110, 110, 0.45 ) );
	.darkmode( box-shadow, inset 0 0 1px 1px rgba( 255, 110, 110, 1 ) );
	.darkmode( color, #fff0f0 );
}

.cm-editor .cm-specialChar {
	color: @color-destructive--hover;
}

.cm-special-char-nbsp {
	color: @color-placeholder;
}

.cm-mw-slow-feature {
	color: @color-subtle;
}

.cm-tooltip-fold {
	cursor: @cursor-base--hover;
	line-height: 1.2;
	padding: 0 1px;
	opacity: 0.6;

	&:hover {
		opacity: 1;
	}
}

.cm-editor .cm-foldPlaceholder {
	background-color: @background-color-interactive;
	border-color: @border-color-subtle;
	color: @color-base;
}

.cm-gutter-lint {
	order: -1;
}

.cm-bidi-isolate {
	/* @noflip */
	direction: ltr;
	unicode-bidi: isolate;
}

.ext-codemirror-wrapper {
	height: 100%;

	textarea {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}

	&--hidden {
		.cm-editor {
			/* stylelint-disable-next-line declaration-no-important */
			display: none !important;
		}

		textarea {
			/* stylelint-disable-next-line declaration-no-important */
			display: initial !important;
		}
	}
}

// The various .cm-editor prefixed styles are required to have higher
// specificity than CodeMirror's default styles, which are set by JS.
.cm-editor .cm-gutters {
	background-color: @background-color-interactive-subtle;
	border-right-color: @border-color-subtle;
	color: @color-subtle;
}

.cm-editor .cm-cursor {
	border-left: 2px solid @color-emphasized;
}

.cm-editor .cm-activeLine {
	background-color: rgba( 204, 238, 255, 0.27 );
	.darkmode( background-color, rgba( 71, 71, 124, 0.2 ) );
}

.cm-editor .cm-tooltip {
	background-color: @background-color-neutral-subtle;
	border-color: @border-color-base;
}

// Panels

.cm-editor .cm-panels {
	background-color: @background-color-neutral-subtle;
	border-bottom: 0;
	color: @color-base;
	direction: ltr;
	z-index: @z-index-above-content;

	.cdx-button-group {
		.cdx-button,
		.cdx-toggle-button {
			min-width: @min-width-toggle-switch;
		}
	}

	.cm-mw-panel {
		border-bottom: @border-style-base @border-width-base @border-color-subtle;
		font-family: @font-family-base;
		padding: @spacing-50;
		position: relative;
	}

	.cm-mw-panel--help {
		font-weight: @font-weight-normal;
	}

	.cm-mw-panel--fieldset legend {
		margin-bottom: @spacing-50;
	}

	.cm-mw-panel--text-input {
		flex-basis: 0;
		flex-grow: 1;
	}

	.cm-mw-panel--checkbox {
		margin-bottom: @spacing-25;
	}

	.cm-mw-panel--row {
		align-items: center;
		column-gap: @spacing-50;
		display: flex;

		&:not( :last-child ) {
			margin-bottom: @spacing-50;
		}
	}

	.cm-mw-panel--button {
		margin-bottom: 0;
	}

	.cm-mw-panel--toggle-button.cdx-toggle-button--toggled-on {
		&:enabled:active {
			background-color: @color-progressive--active;
		}

		.cdx-icon {
			background-color: @color-inverted;
		}
	}

	.cm-mw-panel-close {
		position: absolute;
		right: @spacing-50;
		top: @spacing-50;
	}
}

// Dialogs

.cm-mw-dialog-backdrop {
	opacity: @opacity-transparent;

	&.cm-mw-dialog--hidden {
		display: none;
	}

	&.cm-mw-dialog-animate-show {
		opacity: @opacity-base;
	}
}

.cdx-dialog.cm-mw-dialog {
	.cm-mw-dialog--columns {
		columns: 3 19.5em;
		font-size: @font-size-small;

		&--two-col {
			column-count: 2;
		}

		.cdx-checkbox,
		legend {
			display: inline-block;
			width: 100%;
		}
	}
}

// Find and replace

.cm-editor .cm-panels .cm-mw-panel--search-panel {
	container-type: inline-size;

	.cm-mw-panel--text-input {
		min-width: auto;
	}
	// Responsive design (T386777)
	@container ( max-width: 400px ) {
		// NOTE: We can't use & here yet, see https://github.com/wikimedia/less.php/issues/91
		.cm-editor .cm-panels .cm-mw-panel--row {
			flex-wrap: wrap;
			row-gap: @spacing-50;

			.cm-mw-panel--text-input {
				flex-basis: 100%;
			}

			.cm-mw-panel--button {
				flex-grow: 1;
			}
		}
	}
}

.cm-mw-find-results {
	color: @color-placeholder;
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY( -50% );
}

.cm-mw-icon--match-case {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-search-case-sensitive, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--regexp {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-search-regular-expression, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--quotes {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-quotes, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--previous {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-previous, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--next {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-next, @color-base, @size-icon-medium, true );
}

.cm-mw-icon--close {
	background-color: @color-base;
	.cdx-mixin-css-icon( @cdx-icon-close, @color-base, @size-icon-medium, true );
}

.cm-mw-panel--status-worker,
.cm-mw-panel--status-message,
.cm-mw-panel--status-line {
	padding: 0 0.3em;
	display: table-cell;
}

.cm-mw-panel--status-worker {
	user-select: none;
	cursor: pointer;
}

.cm-mw-panel--status-worker > * {
	display: table-cell;
	white-space: nowrap;
	padding-right: 8px;
}

.cm-mw-panel--status-worker > * > div {
	display: inline-block;
	vertical-align: middle;
}

.cm-mw-panel--status-worker > * > div:first-child {
	margin-right: 4px;
	height: 1em;
}

.cm-mw-panel--status-message {
	border-left: @border-subtle;
	border-right: @border-subtle;
	width: 100%;
}

.cm-mw-panel--status-message .cm-diagnosticAction {
	padding-top: 0;
	padding-bottom: 0;
}

.cm-mw-panel--status-line {
	cursor: pointer;
	text-align: right;
	white-space: nowrap;
}

.cm-diagnosticText-clickable {
	cursor: pointer;
}