// Form Builder styles.
//
// Field options and settings.
//
// @since 1.8.0

.charitable-closed {
	.charitable-group-rows {
		display: none;
	}
}

.charitable-group-rows {
	&.row-first {
		margin-top: 20px;
	}
}

.charitable-field-option-row,
.charitable-group-row  {
	margin-bottom: $spacing_m;

	&-description p.note {
		margin-top: -15px;
	}

	label {
		display: block;
		font-size: $font_size_s;
		font-weight: 400;
		line-height: 17px;
		margin: 0 0 $spacing_ss 1px;
		// vertical-align: text-top;

		&.inline {
			display: inline-block;
			font-weight: 400;
			margin: 0 0 0 $spacing_s;
		}

		// For placing some container in the same line with the label.
		& + .charitable-field-option-in-label-right {
			display: inline-block;
			float: right;
			margin-bottom: 0;
			margin-top: -27px;

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

		select,
		input,
		textarea,
		.ql-toolbar {
			margin-top: 10px;
		}
		textarea {
			&.ql-container {
				margin: 0;
				border-radius: 0;
				width: 100%;
			}
		}

	}

	// After field description.
	.after-label-description {
		color: $color_fields_secondary_text;
		float: right;
		font-size: $font_size_xs;
		text-decoration: none;

		&:hover {
			color: $color_secondary_text;
			text-decoration: underline;
		}
	}

	input,
	textarea,
	select {
		&:not(:focus) {
			border-color: $color_fields_border;
		}
	}

	input[type=checkbox],
	input[type=radio] {
		margin-right: 0;
	}

	input[type=text],
	input[type=number],
	textarea,
	select {
		width: calc( 100% - 2px );
	}

	input[type=text] {
		&.has-before {
			float: right;
			width: 95%;
		}
	}

	.before-input {
		float: left;
		padding: 7px 0 0 0;
		width: 4%;
	}

	p {
		font-size: $font_size_s;
		margin: 0;
	}

	.meta {
		font-weight: 400;
	}

	span.id {
		color: $color_fields_secondary_text;
		font-size: $font_size_xs;
	}

	// Code textarea.
	&.charitable-field-option-row-code {
		textarea {
			font-family: $font_mono;
			font-size: $font_size_xs;
			min-height: 120px;
		}
	}

	// Limit text controls.
	&.charitable-field-option-row-limit_controls {
		align-items: center;
		display: flex;

		&.charitable-hide {
			display: none;
		}

		input {
			margin-right: $spacing_s;
		}
	}

	// Color picker
	&.color-picker-row {
		overflow: visible;

		.minicolors {
			width: 100%;

			.minicolors-swatch {
				height: 22px;
				width: 22px;
				border-radius: 2px;
				border: none;
				overflow: hidden;
				box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.10);

				.minicolors-swatch-color {
					box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15)
				}
			}
		}

		.charitable-color-picker {
			height: auto;
			padding-left: #{ $spacing_l + 5 } !important;
		}
	}

	.coloris-layout {

		max-width: none;
		width: 100%;
		margin-top: 2px;
		margin-bottom: 2px;

		label {
			display: inline-block;
			width: 75px;
			font-size: 13px;
			line-height: 26px;
		}

		// a.reset-link {
		// 	color: black;
		// 	opacity: 0.5;
		// 	font-size: 12px;
		// 	line-height: 16px;
		// 	text-transform: uppercase;
		// 	display: inline-block;
		// 	text-decoration: none;
		// 	margin-left: 30px;
		// }
		// a.reset-link:hover {
		// 	text-decoration: underline;
		// 	opacity: 1;
		// }

		.clr-field {

			width: 100px;
			float: right;

			button {
				border-radius: 25px;
				left: 0;
				width: 20px;
				height: 20px;
				margin: 0;
				left: -30px;
				cursor: pointer;
			}

			button::after {
				cursor: pointer;
				pointer-events: fill;
			}

			input {
				width: 100px;
				height: 32px;
				padding: 0 10px 0 10px;
				border: 1px solid #ccc;
				border-radius: 5px;
				font-family: inherit;
				font-size: inherit;
				font-weight: inherit;
				box-sizing: border-box;
				margin: 2px 0;
			}

		}

	}

	// Confirmation sub-field (Email/Password fields).
	.charitable-confirm-disabled {
		.charitable-field-option-row-confirmation_placeholder,
		.charitable-field-option-row-sublabel_hide {
			display: none;
		}
	}
}

#charitable-field-options .no-fields.charitable-alert {
	position: fixed;
	z-index: 100;
	margin-top: -$spacing_m;
	margin-left: $spacing_m;
	width: #{ $sidebar_width - 40 };
}