@import 'mediawiki.ui/variables.less';

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

.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
	color: @color-primary;
}

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

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

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

.ext-WikiEditor-ResizingDragBar-ns {
	border-top: 1px solid @colorGray12;
}

@loadingbar-width: 20%;

.ext-WikiEditor-realtimepreview-loadingbar div {
	position: absolute;
	z-index: 5;
	display: block;
	opacity: 1;
	content: ' ';
	background-color: @color-primary;
	width: @loadingbar-width;
	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: loadingbar 1.5s 1s infinite linear alternate;
}

@keyframes loadingbar {
	0% {
		visibility: visible;
		left: 0;
	}

	100% {
		// stylelint-disable-next-line plugin/no-unsupported-browser-features
		left: calc( 100% - @loadingbar-width );
	}
}

.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;
	}
}