@import 'mediawiki.mixins';
@import 'flow.colors';
@import 'flow.helpers';

// @todo: Find better home for this css
.client-js {
	// Hide the component while it is loading if Javascript
	// is enabled.
	.flow-ui-load-overlay {
		z-index: 101;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: wait;
	}

	.flow-component {
		position: relative;
		opacity: 0.5;

		&-ready {
			opacity: 1;

			-moz-transition: opacity 0.5s;
			-webkit-transition: opacity 0.5s;
			-o-transition: opacity 0.5s;
			transition: opacity 0.5s;
		}
	}

	/*
	Fallback elements

	Fallback elements are invisible when JavaScript is enabled. They only exist when JavaScript does not run.

	Markup:
	<div class="flow-ui-fallback-element"></div>

	Styleguide X.
	*/
	.flow-ui-fallback-element {
		visibility: hidden;
		height: 0;
	}

	// With JS, hide .flow-nojs & display .flow-js elements
	.flow-nojs {
		display: none;
	}
	.flow-js {
		display: block;
	}
}

.client-nojs {
	// Without JS, hide .flow-js & display .flow-nojs elements
	.flow-nojs {
		display: block;
	}
	.flow-js {
		display: none;
	}
}

// When the load more wrapper is being processed, show the spinning loading icon
.flow-ui-loading {
	// Hide by default
	display: none;

	// But show when a load is pending
	.flow-load-more.flow-api-inprogress & {
		display: block;
	}

	// Align the icon in the center
	text-align: center;
	.mw-ui-icon {
		display: inline-block;
		font-size: 2em;

		// Make the icon rotate
		-webkit-animation: spin infinite 2s linear;
		-moz-animation: spin infinite 2s linear;
		-ms-animation: spin infinite 2s linear;
		-o-animation: spin infinite 2s linear;
		animation: spin infinite 2s linear;

		&.mw-ui-icon-before:before {
			margin-right: 0;
		}
	}
}

// Basic API interaction indicator
div#content div#bodyContent .flow-api-inprogress {
	opacity: 0.5;
	cursor: wait;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); opacity: .5; }
	50% { opacity: .75; }
	100% { -webkit-transform: rotate(360deg); opacity: .5; }
}
@-moz-keyframes spin {
	0% { -moz-transform: rotate(0deg); opacity: .5; }
	50% { opacity: .75; }
	100% { -moz-transform: rotate(360deg); opacity: .5; }
}
@keyframes spin {
	0% { transform:rotate(0deg); opacity: .5; }
	50% { opacity: .75; }
	100% { transform:rotate(360deg); opacity: .5; }
}