// ------------------------------------
// 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 {
	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( $loader-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;
}
