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

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

	div {
		// background-repeat: no-repeat;
		display: inline-block;
		margin: 0 auto;
		padding: $wc-gap-large;
		vertical-align: middle;
		width: auto;

		&:before {
			margin-right: $wc-gap-normal;
		}
	}
}

// (Usually 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'] > * {
	visibility: hidden;
}
