// Form Builder styles.
//
// Admin popup + Form embed wizard.
//
// @since 1.8.0

.charitable-admin-popup-container {
	background-color: rgba( 0, 0, 0, .5 );
	display: none;
	height: 100vh;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100100; // Inside (related to) the #wpwrap.
}

.charitable-admin-popup {
	background-color: white;
	border-radius: $border_radius_m;
	-moz-box-shadow: 0 0 40px 0 rgba( 0, 0, 0, .2 );
	-webkit-box-shadow: 0 0 40px 0 rgba( 0, 0, 0, .2 );
	box-shadow: 0 0 40px 0 rgba( 0, 0, 0, .2 );
	display: block !important;
	left: 50%;
	max-width: 550px;
	min-width: 550px;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate( -50%, -50% );
	overflow: visible;
}

.charitable-admin-popup-content {
	padding: $spacing_xl $spacing_xxl;

	@include font_smoothing();

	h3 {
		color: $color_primary_text;
		font-size: $font_size_xl;
		font-weight: 600;
		letter-spacing: 0;
		margin: 0 0 $spacing_m 0;
		text-align: center;
	}

	p {
		color: $color_secondary_text;
		font-size: $font_size_m;
		letter-spacing: 0;
		line-height: 22px;
		margin: 0 0 $spacing_ms 0;
		text-align: center;

		&.no-gap {
			margin-bottom: 0;
		}

		&.secondary {
			font-size: $font_size_s;
			line-height: 17px;
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	b {
		font-weight: 600;
	}

	select, input[type=text] {
		border: 1px solid $color_brighter_grey_alt;
		border-radius: $border_radius_s;
		color: $color_secondary_text;
		font-size: $font_size_s;
		height: auto;
		line-height: 21px;
		padding: 8px 12px 8px 12px;
		vertical-align: middle;
		width: 320px;

		&:focus {
			border-color: $color_blue;
		}
	}

	.choices__inner {
		padding: 0;
		width: 320px;
		text-align: left;
	}

	input[type=text] {
		&.charitable-admin-popup-shortcode {
			background: $color_light_background;
			color: $color_primary_text;
			font-family: $font_mono;
			font-size: $font_size_ss;
			font-style: normal;
			font-weight: 400;
			line-height: 15px;
			margin: $spacing_m 0 0 0;
			padding: 12px 22px;
			text-align: center;
			width: 100%;
		}
	}

	a.charitable-admin-popup-toggle {
		color: $color_secondary_text;
		text-decoration-line: underline;

		&:hover,
		&:focus {
			box-shadow: none;
			color: $color_primary_text;
		}
	}

	iframe {
		height: 253px;
		margin: $spacing_m 0 0 0;
		width: 449px;
	}
}

.charitable-admin-popup-close {
	color: $color_close;
	cursor: pointer;
	display: block;
	font-size: $font_size_m !important;
	line-height: 12px;
	position: absolute;
	right: $spacing_s;
	top: $spacing_s;

	&:hover {
		color: $color_close_hover;
	}
}

.charitable-admin-popup-btn {
	background-color: #DDDDDF;
	border: 1px solid #cfcfd2;
	border-radius: 8px;
	box-shadow: none;
	color: #595c67;
	cursor: pointer;
	display: inline-block;
	font-size: $font_size_m;
	font-weight: 600;
	line-height: 19px;
	max-width: calc( 50% - #{ $spacing_ms } );
	width: calc( 50% - #{ $spacing_ms } );
	overflow: hidden;
	padding: $spacing_s $spacing_m;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;

	&:hover {
		background-color: #bcbcbc;
	}

	.dashicons-external {
		margin-left: 6px;
	}

	&[data-action="go"] {
		width: 120px;
	}

	&:first-child {
		margin-right: $spacing_s;
	}

	&:last-child {
		margin-left: $spacing_s;
	}

	&:only-child {
		margin-left: 0;
		margin-right: 0;
	}

	&:disabled {
		cursor: default;
		opacity: .5;

		&:hover {
			// background-color: $color_orange;
		}
	}
}

.charitable-admin-popup-bottom {
	margin: $spacing_m 0 0 0;
}

.charitable-admin-popup-flex {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

#charitable-admin-campaign-embed-wizard {

	.is-flipped .choices__list--dropdown {
		@include choicesjs_unflippable;
	}

	.choices__list {
		text-align: left;
	}

	.choices__list--single {
		color: $color_secondary_text;
		line-height: 21px;
		padding: 8px 12px 8px 12px;
		vertical-align: middle;
	}

	.choices__item {
		color: $color_secondary_text;
	}
}

#charitable-admin-campaign-embed-wizard-shortcode-wrap {
	display: table;
	margin: 0 auto;
}

#charitable-admin-campaign-embed-wizard-shortcode {
	left: $spacing_ms;
	position: relative;
	width: $sidebar_width;
}

#charitable-admin-campaign-embed-wizard-shortcode-copy {
	position: relative;
	right: 25px;
	top: $spacing_s;

	i {
		background: $color_white;
		border: $border_std;
		border-radius: $border_radius_xs;
		color: $color_lighter_text;
		cursor: pointer;
		padding: 8px;
		vertical-align: middle;
	}

	&:hover i {
		border-color: $color_border_hover;
		color: $color_primary_text;
	}
}