/* wc.ui.loading.scss */
// styling for the loading indicator that appears for page reloads and AJAX regions
@import 'vars_all.scss';

// loading indicator is generated and identified
//scss-lint:disable IdSelector
#wc_ui_loading {
	position: fixed;
	text-align: center;
	top: $vgap-normal;
	vertical-align: middle;
	width: 100%;
	z-index: 100;

	div {
		background-color: $wc-ui-color-global-bg;
		background-repeat: no-repeat;
		color: $wc-ui-color-global-fg;
		display: inline-block;
		margin: 0 auto;
		padding: 1em;
		vertical-align: middle;
		width: auto;

		&:before { // the spinner
			background-image: url('../images/loading.svg');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			content: '\a0';
			display: inline-block;
			height: 2em;
			margin-right: $hgap-normal;
			vertical-align: middle;
			width: 2em;
		}
	}
}


// ajax busy areas
// We make the background of the busy element transparent and set all of its children to visibility:hidden so the
// element appears to just vanish and leave its loading indicator You may want to change this (a Cheshire cat maybe?).
[aria-busy='true'] {
	// Some of these properties have to be important to over-ride specific component's rules
	// scss-lint:disable ImportantRule
	background-color: transparent !important;
	background-image: url('../images/loading.svg') !important;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: $line-size $line-size !important;
	border-color: transparent !important;
	color: $wc-ui-color-disabled-fg;

	// Make any interactive child element of a busy region invisible. We want them to take up their space but not be
	// shown to reduce the likelihood of a user interacting with them whilst they are being updated/replaced.
	> * {
		visibility: hidden;
	}
}
