// Form Builder styles.
//
// General styles.
//
// @since 1.8.0

// CSS Variables.
:root {
	--charitable-admin-bar-height: 0px;
}

// Styles.
body {
	font-family: $font_general;
	font-size: $font_size_s;
	font-style: normal;
	font-weight: 400;
	line-height: 17px;
	overflow: hidden !important;
}

a {
	color: $color_blue;

	&:hover {
		color: $color_bright_blue;
	}
}

button {
	font-size: $font_size_s;
}

a,
button {
	transition-duration: $transition_fast;
	transition-property: border, background, color;
	transition-timing-function: ease-in;

	&:focus {
		box-shadow: none;
		outline: none;
	}
}

h1, h2, h3 {
	font-weight: 600;
	margin-bottom: $spacing_s;
	padding: 0;
}

h1 {
	font-size: $font_size_xl;
	margin-bottom: 0;
}

h2 {
	font-size: $font_size_l;
}

h3 {
	font-size: $font_size_m;
}

p {
	line-height: 1.5 * $font_size_m;
	margin: 0 0 $spacing_s 0;
}

ul {
	list-style: none;
	margin-block-end: 0;

	margin-block-start: 0;
	margin-inline-end: 0;
	margin-inline-start: 0;
	padding: 0;
}

li {
	margin-bottom: $spacing_xs;
}

#charitable-builder {
	background: $color_white;
	color: $color_primary_text;
	cursor: default;
	height: 100%;
	margin: 0 !important;
	min-width: 0;
	overflow: hidden;
	position: fixed;
	z-index: 100099; // Inside (related to) the #wpbody-content.

	@include inset_0();

	.charitable-clear {
		&:before {
			content: "";
			display: table;
		}

		&:after {
			clear: both;
			content: "";
			display: table;
		}
	}

	.note {
		color: $color_secondary_text;
		font-size: $font_size_ss;
		line-height: $font_size_l;
	}

	.secondary-text {
		color: $color_secondary_text;
		font-size: $font_size_s;
	}

	a {
		&.secondary-text:hover {
			color: $color_primary_text;
		}
	}

	.hidden,
	.charitable-hidden,
	.charitable-field-hidden {
		display: none;
	}

	// In some cases we need to override inline style display value.
	.charitable-hidden-strict {
		display: none !important;
	}

	// Some elements are faded out to appear as "not available".
	.charitable-not-available,
	.charitable-not-installed,
	.charitable-need-upgrade {
		opacity: .62;
		img.charitable-builder-sidebar-icon {
			opacity: .33;
		}
	}

	.charitable-campaign-preview-not-available {
		opacity: 0.05;
	}

	// Columns.
	.charitable-one-half {
		float: left;
		width: calc( 50% - #{ $spacing_m / 2 } );
	}

	.charitable-one-half.last {
		float: right;
		margin-right: 0;
	}

	.charitable-one-half.charitable-hide + .charitable-one-half.last {
		float: left;
	}

	.charitable-one-third {
		float: left;
		margin-right: $spacing_m;
		width: calc( #{ 100% / 3 } - #{ $spacing_m * 2 / 3 } );
	}

	.charitable-one-third.last {
		float: right;
		margin-right: 0;
	}

	.charitable-two-thirds {
		float: left;
		margin-right: $spacing_m;
		width: calc( #{ 100% * 2 / 3 } - #{ $spacing_m * 2 / 3 } );
	}

	.charitable-help-tooltip-container {

		width: 18px;
		height: 18px;
		top: 4px;
		position: relative;

		// Tooltip icon.
		.charitable-help-tooltip {
			color: $color_hint;
			display: inline-block;
			font-size: $font_size_m - 1;
			margin: 0 0 0 5px;

			&:hover {
				color: $color_secondary_text;
				cursor: help;
			}
		}

	}

	.charitable-panel-sidebar {
		.charitable-panel-field {
			max-width: 100%;
		}
		.charitable-campaign-builder-headline-light {
			font-weight: 500;
		}
		.charitable-help-tooltip {
			color: $color_fields_hint;

			&:hover {
				color: $color_fields_secondary_text;
			}
		}
	}

	label {
		span.required {
			color: $color_red;
		}
	}
}

// Flex columns.
.charitable-columns {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;

	&.charitable-columns-2 {
		.charitable-column {
			width: calc( 50% - #{ $spacing_l / 2 } );
		}
	}

	&.charitable-columns-3 {
		.charitable-column {
			width: calc( 100% / 3 - #{ $spacing_l * 2 / 3 } );
		}
	}

	&.charitable-columns-4 {
		.charitable-column {
			width: calc( 100% / 4 - #{ $spacing_l * 3 / 4 } );
		}
	}
}

// Loading spinner.
.charitable-loading-spinner {
	background-image: url( "../../images/campaign-builder/spinner.svg" );
	background-repeat: no-repeat;
	background-size: 15px 15px;
	display: block;
	height: 15px;
	margin: 0 $spacing_s;
	vertical-align: -2px;
	width: 15px;

	@include animation( charitable-spinner-rotation .8s linear infinite );

	&.charitable-loading-white {
		background-image: url( "../../images/campaign-builder/spinner-white.svg" );
	}

	&.charitable-loading-md {
		background-size: 24px 24px;
		height: 24px;
		width: 24px;
	}

	&.charitable-loading-inline {
		display: inline-block;
	}

	&.preview-ajax {
		position: absolute;
		width: 36px;
		height: 36px;
		background-size: 36px 36px;
		top: calc( 50% - 18px );
		left: calc( 50% - 18px );
	}
}