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

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

@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 );
	}
}