@import 'mediawiki.skin.variables.less';

// We want these transitions to only occur when entering the editor, but not when leaving it.
// Leaving uses browser back navigation and we shouldn't "delay" it.
.ve-loading {
	// Intentionally slower than most UI animations to make the transition obvious to the user
	// (and loading the editor is probably going to take >500ms anyway).
	@timing: 400ms 100ms;

	.content .section-heading .indicator {
		transition: width @timing, min-width @timing, margin @timing, opacity @timing;
		flex-basis: 0;
		min-width: 0;
		margin-right: 0;
		opacity: 0;
	}

	.mw-editsection {
		transition: opacity @timing;
		opacity: 0;
	}

	.page-actions-menu {
		transition: border-bottom-color @timing;
		border-bottom-color: transparent;
	}

	.mw-body {
		transition: padding-bottom @timing, margin-bottom @timing, transform @timing;
		// Values set dynamically in JS code
	}
}

.ve-loadbasiceditor {
	text-align: center;
	position: absolute;
	left: 0;
	top: 3em;
	width: 100%;
	padding: 1em;
	box-sizing: border-box;
	background: @background-color-base;
	border-bottom: 1px solid @border-color-subtle;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
	visibility: hidden;
	transform: translateY( -100% );
	transition: transform 400ms ease;
	pointer-events: none;

	> p {
		text-align: left;
		font-weight: bold;
		margin-bottom: 1em;
	}
}

.toolbar-shown-done + .ve-loadbasiceditor {
	visibility: visible;
}

.ve-loadbasiceditor-shown {
	transform: translateY( 0 );
	pointer-events: auto;
}

// Note that these classes are also used by VisualEditor code for the real toolbar:
.toolbar-hidden {
	transform: translateY( -100% );
}

.toolbar-shown {
	transition: transform 250ms ease;
	transform: translateY( 0 );
	opacity: 1;
}

.toolbar-shown-done {
	/* Turn off transforms when done to avoid Safari rendering bugs (T202935) */
	transform: none;
}