// Form Builder styles.
//
// Panel fields.
// Add fields.
//
// @since 1.8.0

// .charitable-general-layout-group,
.charitable-group {
	border-bottom: 1px solid $color_fields_divider;
	padding: 0 10px;

	&:first-of-type {
		margin-top: -$spacing_m;
	}

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

	&.charitable-new-tab {
		.charitable-general-layout-heading {
			span {
				font-style: italic;
			}
		}
	}

	&.active {
		background: $color_white;
	}

	.charitable-tab-group-delete {
		margin-right: 10px;
		float: right;
	}

	.charitable-draggable {
		float: left;
		margin-right: 10px;
	}

	.charitable-general-layout-heading {
		color: $color_primary_text;
		display: block;
		font-size: $font_size_m;
		font-weight: 600;
		margin: 0;
		outline: 0;
		overflow: hidden;
		padding: $spacing_m 0;
		text-decoration: none;
		padding-top: 10px;

		&:hover {
			text-decoration: none;
		}

		&:active,
		&:focus {
			outline: 0;
		}

		i {
			color: $color_fields_secondary_text;
			float: right;
			font-size: $font_size_ll;
			margin: -2px 0 0 0;

			@include transition( transform, $transition_slower, ease-out );

			&.charitable-angle-right {
				transform: rotate( -90deg );
			}
		}
	}

	.charitable-general-layout-heading:first-of-type {
		// padding-top: 0;
	}

	.charitable-add-fields-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: $spacing_m;
		overflow: hidden;
	}

	button.charitable-btn {
		background-color: $color_blue;
		border: none;
		border-radius: $border_radius_s;
		color: $color_white;
		display: block;
		margin: #{ 2 * $spacing_ss } 0 0 0;
		width: calc( 50% - #{ $spacing_ss } );
		overflow: hidden;
		padding: 12px $spacing_xs 12px 14px;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:hover {
			background-color: $color_dark_blue;
			cursor: pointer;
		}

		&:disabled,
		&.ui-draggable-disabled {
			&:hover {
				background-color: $color_blue;
				cursor: no-drop;
			}
		}

		&:nth-child(1),
		&:nth-child(2) {
			margin-top: 0;
		}

		i {
			color: $color_white_trans_60;
			display: inline-block;
			margin: 0 #{ $spacing_xs + 2 } 0 0;
		}
	}
}