@import 'flow.colors';
@import 'flow.variables';

.flow-ui-editorSwitcherWidget {
	display: block;
	background-color: white;

	&-placeholder-input {
		max-width: none;
		background-color: transparent;
		// Provide fallback for browsers that don't have calc function
		// (Currently IE8, Opera Mini, Android 4.3)
		min-height: @editorMinHeight;
		// The placeholder should be the same height as the editor: minHeight + toolbarHeight.
		// However, each of those is in different
		// units (minHeight in em and toolbarHeight in px) which means we must
		// use CSS's native calc() method.
		// This escapes the calc() method while using LESS variables:
		min-height: ~"calc(@{editorMinHeight} + @{editorToolbarHeight})";

		& textarea {
			border: none;

			// Comma-separating this rule doesn't work :(
			// Placeholder text styling must be set individually for each browser @winter
			&::-webkit-input-placeholder { // webkit
				font-style: italic;
			}
			&::-moz-placeholder { // FF 4-18
				font-style: italic;
			}
			&:-moz-placeholder { // FF >= 19
				font-style: italic;
			}
			&:-ms-input-placeholder { // IE >= 10
				font-style: italic;
			}
		}
	}

	// because we're attaching switcher controls below the textarea & we
	// want them to look unified with the textarea, we'll have to take away
	// it's border and re-apply on the parent node that contains both
	border: 1px solid @colorFieldBorder;
	-webkit-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);

	// Undo top margin on error box
	&-error.flow-errors {
		margin-top: 0;
	}

	// HACK: Undo border set by "old" editor CSS
	> .flow-ui-visualEditorWidget > .ve-init-target {
		border: none;
	}
}