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

.ext-WikiEditor-realtimepreview-button {
	&:hover {
		background-color: @background-color-interactive;
	}

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

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

/* stylelint-disable selector-max-id */
.ext-WikiEditor-realtimepreview-textbox#wpTextbox1,
.mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 {
	resize: none;
	height: 100%;
	min-height: auto;
	max-height: none;
}

.ext-WikiEditor-realtimepreview-preview {
	padding: 0 6px;
	position: relative;
}

.wikiEditor-ui .wikiEditor-ui-view {
	border-bottom: 0;
}

.ext-WikiEditor-ResizingDragBar-ns {
	border-top: @border-width-base @border-style-base @border-color-subtle;
}

@width-loading-bar: 20%;

.ext-WikiEditor-realtimepreview-loadingbar div {
	position: absolute;
	z-index: 5;
	display: block;
	opacity: 1;
	content: ' ';
	background-color: @background-color-progressive;
	width: @width-loading-bar;
	height: 4px;
	// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
	visibility: hidden;
	animation: loading-bar 1.5s 1s infinite linear alternate;
}

@keyframes loading-bar {
	0% {
		visibility: visible;
		left: 0;
	}

	100% {
		left: calc( 100% - @width-loading-bar );
	}
}

.ext-WikiEditor-twopanes-pane2 {
	.ext-WikiEditor-reloadButton {
		opacity: 0;
		transition: opacity 100ms;
		position: absolute;
		top: 8px;
		right: 15px;
		z-index: 5;
	}

	&:hover .ext-WikiEditor-reloadButton {
		opacity: 1;
	}
}