@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
@import 'flow.variables';
@import 'flow.colors';

.flow-component {
	.ve-init-target {
		&.flow-ui-focused {
			border-color: @colorProgressive;
			box-shadow: inset 0 0 0 2px @colorProgressive;
		}
	}

	// Undo .mw-body-content font-size (0.875em) and apply font-size matching OOUI theme (0.8em)
	@uiFontSize: 0.8/0.875em;

	.ve-ui-overlay {
		font-size: @uiFontSize;
	}

	.oo-ui-toolbar {
		// The 2px of positive margin gives room for the blue border of the
		// documentNode (via .mw-ui-input)
		margin: (-@editorToolbarHeight - 2px) 2px 2px 2px;

		font-size: @uiFontSize;
		.oo-ui-toolbar {
			// But don't let these rules double-apply for nested toolbars
			font-size: 1em;
		}
	}

	.oo-ui-toolbar-bar {
		// The default border is only appropriate in the default ve, with
		// the toolbar above the editing surface.
		border: none;
		box-shadow: none;
		// When we apply a pending texture to the editor, we don't want the toolbar to display
		// in solid white on top of that.
		background: transparent;
	}

	.oo-ui-toolGroup {
		border: none;
	}
}

.flow-editor {
		// Undo border & box-shadow on textarea and re-apply it on the
		// div that contains textarea + legal text + switch button
		&.flow-ui-focused {
			border-color: @colorProgressive;
			box-shadow: inset 0 0 0 2px @colorProgressive;
		}
}

.flow-ui-editorSwitcherWidget {
	&-focused {
		border-color: @colorProgressive;
		box-shadow: inset 0 0 0 2px @colorProgressive;
	}
}