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

$_body-theme-selector:                                          '' !default;
$_icon-name:                                                    'i-loader-circle' !default;
$_loader-animation-name:                                        loader-spin !default;
$_loader-animation-name--button:                                loader-spin-centered !default;
$_loader-animation-speed:                                       $global-animation-duration-slow !default;
$_loader-icon-top:                                              calc( ( #{ $form-field-height } / 2 ) - ( #{ $icon-size } / 2 ) ) !default;
$_loader-icon-horizontal-spacing:                               remsize( .5rem ) !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( $_icon-name );
	@include icon-size( $icon-size );

	z-index: z( 'above' );
	content: icon-glyph( $_icon-name ) !important; // Needed to override validation icon styles as both target the same element
	position: absolute;
	top: $_loader-icon-top;
	#{ $alignment-right }: $_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 {
	position: relative;
	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 {
	@include icon( $_icon-name );
	@include icon-size( $icon-size );

	z-index: z( 'above' );
	position: absolute;
	top: 50%;
	left: 50%; // Does not need to handle RTL
	transform: translateX( -50% ) translateY( -50% );
	#{ $alignment-right }: $global-spacing-extra-small;
	width: $icon-size;
	height: $icon-size;
	font-size: $icon-size;
	line-height: 1;
	border-radius: 100%;
	background-color: transparent;
	animation: $_loader-animation-name--button $_loader-animation-speed linear infinite;
	color: $white !important; // Needed to override theme styles
	pointer-events: none;
}
