// .scss files will get core functions and variables automatically from build script


@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(359deg); }
}





// loading
#bbox-root #bbox-msg-wrapper {
	> img {
		display: none;
	}
	
	text-align: center;
	
	#bbox-msg {
		padding: 0;
		
		&::before {
			@include icon-font-style;
			content: $icon-loading;
			color: $blue2;
			font-size: rem(36);
			animation: 1s spin infinite linear;
			margin: auto;
		}
	}
}



#bbox-root .BBFormContainer {
	padding: 0;

	// section headings

	.BBFormSectionHeading {
		border: 0 none;
		padding: 0;
		margin: 2rem 0 .5rem 0;
		background-color: transparent;
		
		
		label {
			font-weight: normal;
			@include tungsten;
			font-size: rem(30);
			color: $purple-alt;
			line-height: 1em;
		}
	}
	
	
	// field label
	.BBFormFieldLabel, .BBFormFieldLabelEdit {
		line-height: 1.5em;
		font-weight: bold;
		color: $body-color;
		width: auto;
		float: none;
		padding-right: 0;
		margin: 0 0 0.25rem 0;
		text-align: left;
	}
	
	.BBDFormSectionComments .BBFormTextArea { margin-left: 0; }
	.BBLinkSecureInfo { margin-left: 0; }
	.BBFieldExpiration { min-width: auto; }
	
	// card info 
	.BBFieldSecurityCode {
		margin-left: 1rem;
	}
	
	// required fields
	.BBFormFieldContainerRequired {
		.BBFormFieldLabel { 
			&::after {
				content: '\2737';
				color: $red1;
			}
		}
	}
	
	// error reporting
	.BBFormErrorBlock {
		border-radius: 0;
		border: 0 none;
		background: $offwhite;
		color: $body-color;
		
		input, textarea, select {
			box-shadow: 0 0 0 2px $blue1;
		}
	}
	
	
	// link
	.BBLinkSecureInfo {
		border: 0 !important;
		color: $link-color;
		
		&:hover { text-decoration: underline !important; }
	}
	
	// field forms
	.BBFormFieldContainer {
		margin: 10px 0;
		background-color: transparent;
	}
	
	// horizontal radio buttons
	
	.BBFormFieldContainerGivingLevels { margin: 0; }
	
	.BBFormRadioList {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: 1rem;

		
		.BBFormRadioItem {
			margin: 0;
			width: auto;
			height: 100%;
			
			.BBFormRadioButtonContainer { height: 100%; }
			
			.BBFormRadioLabelGivingLevel {
				background-color: white;
				border-radius: 5px;
				font-size: rem(18);
				width: 100%;
				height: 100%;
				padding: 10px;
				text-align: center;
				margin: 0;
				float: none;
				min-width: auto;
				
				.BBFormRadioDescription, .BBFormRadioDescriptionOther {
					font-size: rem(14);
					font-weight: normal;
					display: block;
					max-width: auto;
					padding: 0;
					margin: 0 0 0.25rem 0;
					float: none;
					text-align: center;
				}
				
				.BBFormRadioAmount {
					display: block;
					padding: 0;
					text-align: center;
					float: none;
					min-width: auto;
				}
				
				&:hover {
					background: $purple-alt;
					color: white;
				}
			}
			
			.BBFormRadioLabelGivingLevelSelected {
				background: $purple;
				color: $gold;
				border: 1px solid $purple-alt;
			}
			
	
		}
		
	}
	
	
	// recurring payment
	.BBFormFieldRecurrenceInfo {
		padding: 0;
		margin: 0;
		font-style: normal;
		font-size: 1rem;
		
		#lblRecurrenceNextGiftDate {
			display: inline-block;
			padding: 0.5rem;
			background-color: $gold-alt;
			color: $body-color;
		}
	}



	// submit button 
	.BBFormSubmitbutton {
		background: $gold-alt;
		color: $purple-alt;
		border-color: $gold;
		box-shadow: 0 5px 5px -5px rgba(0,0,0,.75);
		border-radius: 5px;
		padding: 1rem 1.5rem;
		font-weight: normal;
		font-size: rem(24);
		border: 1px solid rgba(0,0,0,.3);
		
		&:hover {
			opacity: 1;
			background: $gold;
			color: $purple;
		}
	}



	

}