// ------------------------------------
// DEFINE LOCAL VARIABLES
// ------------------------------------

$_body-theme-selector:                                          '' !default;





// ------------------------------------
// CHECKOUT LOADING INDICATORS
// ------------------------------------

// FIELD WRAPPERS
div.woocommerce form .form-row .woocommerce-input-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

// FORM ROWS
body#{ $_body-theme-selector } div.woocommerce .form-row.fc-loading .woocommerce-input-wrapper:after {
	@include icon( $loader-icon-name );
	@include icon-size( $icon-size );

	z-index: z( 'above' );
	content: icon-glyph( $loader-icon-name ) !important; // Needed to override validation icon styles as both target the same element
	position: absolute;
	top: $form-field-loader-icon-top;
	#{ $alignment-right }: $form-field-loader-icon-horizontal-spacing;
	width: $icon-size !important; // Needed to override validation icon styles as both target the same element
	height: $icon-size !important; // Needed to override validation icon styles as both target the same element
	font-size: $icon-size !important; // Needed to override validation icon styles as both target the same element
	line-height: $icon-size !important; // Needed to override validation icon styles as both target the same element
	border-radius: 100%;
	background-color: transparent !important; // Needed to override validation icon styles as both target the same element
	animation: $loader-animation-name $loader-animation-speed linear infinite;
	color: $grey !important; // Needed to override validation icon styles as both target the same element
	pointer-events: none;
}



// BUTTONS
body#{ $_body-theme-selector } div.woocommerce button.fc-loading,
body#{ $_body-theme-selector } div.woocommerce .button.fc-loading,
body#{ $_body-theme-selector } div.woocommerce .fc-place-order .fc-place-order-button.fc-loading {
	position: relative !important; // Needed to override theme styles
	color: transparent !important; // Needed to override theme styles
}

body#{ $_body-theme-selector } div.woocommerce button.fc-loading:after,
body#{ $_body-theme-selector } div.woocommerce .button.fc-loading:after,
body#{ $_body-theme-selector } div.woocommerce .fc-place-order .fc-place-order-button.fc-loading:after {
	@include icon( $loader-icon-name );
	@include icon-size( $icon-size );

	z-index: z( 'above' ) !important; // Needed to override theme styles
	position: absolute !important; // Needed to override theme styles
	top: 50% !important; // Needed to override theme styles
	left: 50% !important; // Needed to override theme styles
	transform: translateX( -50% ) translateY( -50% ); // Cannot force this to be !important, because it causes the spinner animation to stop working
	margin: 0 !important; // Needed to override theme styles
	#{ $alignment-right }: $global-spacing-extra-small !important; // Needed to override theme styles
	width: $icon-size !important; // Needed to override theme styles
	height: $icon-size !important; // Needed to override theme styles
	font-size: $icon-size !important; // Needed to override theme styles
	line-height: 1 !important; // Needed to override theme styles
	border-radius: 100% !important; // Needed to override theme styles
	border: 0 !important; // Needed to override theme styles
	background-color: transparent !important; // Needed to override theme styles
	animation: $loader-animation-name--button $loader-animation-speed linear infinite !important; // Needed to override theme styles
	color: $white !important; // Needed to override theme styles
	opacity: 1 !important; // Needed to override theme styles
	pointer-events: none !important; // Needed to override theme styles
}



// BLOCKUI OVERLAY (verbose indicator)
body#{ $_body-theme-selector }.has-loading-indicator-verbose div.woocommerce .blockUI.blockOverlay:after {
	@include icon( $loader-icon-name );
	@include icon-size( $icon-size );

	z-index: z( 'above' );
	content: icon-glyph( $loader-icon-name ) !important; // Needed to override validation icon styles as both target the same element
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX( -50% ) translateY( -50% );
	width: $icon-size !important; // Needed to override validation icon styles as both target the same element
	height: $icon-size !important; // Needed to override validation icon styles as both target the same element
	font-size: $icon-size !important; // Needed to override validation icon styles as both target the same element
	line-height: $icon-size !important; // Needed to override validation icon styles as both target the same element
	border-radius: 100%;
	background-color: transparent !important; // Needed to override validation icon styles as both target the same element
	animation: $loader-animation-name $loader-animation-speed linear infinite;
	color: $grey !important; // Needed to override validation icon styles as both target the same element
	pointer-events: none;
}

body#{ $_body-theme-selector }.has-loading-indicator-verbose div.woocommerce form.checkout > .blockUI.blockOverlay:after {
	@include icon-size( $icon-size-large );
	width: $icon-size-large !important; // Needed to override validation icon styles as both target the same element
	height: $icon-size-large !important; // Needed to override validation icon styles as both target the same element
	font-size: $icon-size-large !important; // Needed to override validation icon styles as both target the same element
	line-height: $icon-size-large !important; // Needed to override validation icon styles as both target the same element
}