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

.ext-WikiEditor-twopanes-TwoPaneLayout {
	// stylelint-disable-next-line plugin/no-unsupported-browser-features
	display: flex;

	.ext-WikiEditor-twopanes-pane1 {
		border: 1px solid @colorGray12;
		border-width: 0 1px 0 0;
		// Offset by half the difference in padding and the UI affordance.
		// stylelint-disable-next-line plugin/no-unsupported-browser-features
		width: ~'calc( 50% - 9px )';
	}

	.ext-WikiEditor-twopanes-pane2 {
		position: relative;
		border: 1px solid @colorGray12;
		border-width: 0 0 0 1px;
		flex: 1 1 0;
		overflow: auto;
		padding: 0 6px;
	}

	@loadingbar-width: 20%;

	// stylelint-disable-next-line selector-pseudo-element-colon-notation
	.ext-WikiEditor-twopanes-pane2.ext-WikiEditor-twopanes-loading::before {
		position: absolute;
		top: 0;
		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 );
		}
	}
}