/**
 * everest-forms.scss
 * Governs the general look and feel of EverestForms sections of sites using themes that do not
 * integrate with EverestForms specifically.
 */

/**
 * Imports
 */
@import 'mixins';
@import 'variables';
@import 'animation';
@import 'fonts';
@import 'clearings';

/**
 * Global styles
 */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/**
 * Utility classes
 */
.clear {
	clear: both;
}

/**
 * Main EverestForms styles
 */
.everest-forms {
	*,
	*::before,
	*::after {
		outline: none;
		box-sizing: border-box;
	}

	ul {
		margin-left: 0;
	}

	.blockUI.blockOverlay {
		position: relative;
		@include loader();
	}

	.clear {
		height: auto;
		width: auto;
		visibility: visible;
	}

	.loader {
		@include loader();
	}

	.evf-container {
		margin-bottom: 30px;
	}

	.everest-forms-progress-bar {
		background: $color_gray-lighten;
		border-radius: 2px;

		.everest-forms-progress-bar-indicator {
			height: 4px;
			background: $green;
			border-radius: 2px;
		}
	}

	label {
		display: block;
		line-height: 1.7;
		margin: 0 0 10px 0;
		color: $color_gray-base;
		font-size: $font_size-label;

		.required {
			color: $red;
			font-weight: 700;
			border: 0 !important;
			text-decoration: none;
		}

		&.evf-field-label {
			font-weight: 600;
		}

		&.evf-error {
			color: $red;
			font-weight: 400;
		}

		&.everest-forms-field-sublabel {
			font-size: 12px;
			font-weight: 400;
			line-height: 1.5;
			margin: 0 0 10px 0;
		}
	}

	input[type='text'],
	input[type='date'],
	input[type='date'],
	input[type='datetime-local'],
	input[type='email'],
	input[type='file'],
	input[type='image'],
	input[type='month'],
	input[type='number'],
	input[type='password'],
	input[type='range'],
	input[type='search'],
	input[type='tel'],
	input[type='time'],
	input[type='url'],
	input[type='week'],
	select,
	textarea,
	.StripeElement,
	canvas.evf-signature-canvas {
		width: 100%;
		height: auto;
		font-size: 14px;
		outline: none;
		box-shadow: none;
		margin-bottom: 10px;
		padding: 6px 12px;
		color: $color_gray-base;
		border: 1px solid $color_gray-light;
	}

	.select2-container {
		margin-bottom: 10px;

		.select2-selection--single {
			height: 32px;
		}
	}

	input {
		&:focus {
			outline: none;
			border: 1px solid $blue;
		}
	}

	.everest-form {
		&::after {
			content: '';
			clear: both;
			display: table;
		}
	}

	.everest-forms-field-row {
		&::before,
		&::after {
			content: '';
			clear: both;
			display: table;
		}

		&:last-child {
			.everest-forms-field-sublabel {
				margin-bottom: 0;
			}
		}
	}

	.evf-title-container {
		.everest-forms--title {
			font-size: 26px;
			margin: 0 0 10px 0;
		}

		.everest-forms--description {
			margin: 0 0 10px 0;
		}
	}

	.evf-field-container {
		.evf-frontend-row {
			display: flex;
			flex-wrap: wrap;
			margin-left: -15px;
			margin-right: -15px;

			.everest-forms-one-half {
				width: 48%;
				float: left;
				margin-left: 4%;

				&:first-child {
					margin-left: 0;
				}
			}

			.everest-forms-first {
				margin-left: 0;
			}

			.evf-frontend-grid {
				width: 100%;
				padding-left: 15px;
				padding-right: 15px;

				.evf-field {
					display: block;
					margin-bottom: 10px;

					&.evf-field-hidden {
						display: none;
					}

					.evf-label-hide,
					.everest-forms-sublabel-hide {
						display: none;
					}

					.validate-required {
						canvas {
							&.evf-signature-canvas {
								border-color: $red;
							}
						}
					}

					ul {
						margin-bottom: 10px;
						padding: 0;
						list-style: none;

						li {
							margin: 0;
							display: block;

							label,
							input {
								margin: 0;
							}

							input[type='checkbox'],
							input[type='radio'] {
								padding: 0;
								margin-top: 6px;
								margin-right: 8px;
							}
						}
					}

					&.evf-field-title {
						h3 {
							margin: 25px 0;
							font-size: 16px;
							line-height: 1.5;
						}
					}

					&.everest-forms-invalid {
						> label {
							color: $red;
						}

						.select2-container,
						input.evf-error,
						select.evf-error,
						textarea,
						.evf-signature-canvas {
							border-color: $red;
						}

						input {
							&.evf-error {
								border-color: $red;
								~ .everest-forms-field-sublabel {
									color: $red;
								}
							}
						}
					}

					&.everest-forms-validated {
						select,
						textarea,
						input.input-text,
						.select2-container,
						.evf-signature-canvas {
							border-color: $green;
						}
					}

					::-webkit-input-placeholder {
						line-height: normal;
					}

					:-moz-placeholder {
						line-height: normal;
					}

					:-ms-input-placeholder {
						line-height: normal;
					}

					&.evf-field-radio,
					&.evf-field-checkbox,
					&.evf-field-payment-multiple,
					&.evf-field-payment-checkbox {
						ul {
							li {
								display: flex;
								margin-bottom: 5px;

								&.everest-forms-image-choices-item {
									input {
										margin-top: 0;
									}
								}
							}

							&.everest-forms-image-choices label {
								cursor: pointer;
							}
						}

						&.everest-forms-list-inline ul li {
							vertical-align: top;
							display: inline-flex;
							margin-right: 20px;
						}

						&.everest-forms-list-2-columns,
						&.everest-forms-list-3-columns {
							ul {
								display: flex;
								flex-wrap: wrap;
								margin-left: -15px;
								margin-right: -15px;

								li {
									width: 100%;
									padding-left: 15px;
									padding-right: 15px;

									.everest-forms-image-choices-image {
										margin-bottom: 10px;
									}
								}
							}
						}

						&.everest-forms-list-2-columns {
							@media (min-width: 768px) {
								li {
									flex: 0 0 50%;
									max-width: 50%;

									&:nth-child(1n + 3) {
										margin-top: 10px;

										@media screen and (max-width: 768px) {
											margin-top: 0;
										}
									}
								}
							}
						}

						&.everest-forms-list-3-columns {
							@media (min-width: 768px) {
								li {
									flex: 0 0 33.33333%;
									max-width: 33.33333%;

									&:nth-child(1n + 4) {
										margin-top: 10px;
									}
								}
							}
						}
					}

					&.evf-field-captcha {
						.everest-forms-captcha-equation {
							font-size: 16px;
						}

						.everest-forms-captcha-question {
							margin: 0 0 4px 0;
						}

						.everest-forms-captcha-math input {
							width: 70px;
							margin: 0 0 0 5px;
							display: inline-block;
							vertical-align: inherit;
						}
					}

					.iti {
						&.iti--allow-dropdown {
							& + .evf-error {
								margin-top: 10px;
							}
						}
					}
				}
			}

			input {
				&[type='checkbox'],
				&[type='radio'] {
					box-shadow: none;
				}

				&[type='checkbox'] {
					appearance: checkbox;
				}

				&[type='radio'] {
					appearance: radio;
				}

				&[type='checkbox']:checked {
					background-color: $blue;

					&::before {
						color: $color-white;
						background-color: transparent;
					}
				}

				&[type='radio']:checked {
					&::before {
						background-color: $blue;
					}
				}

				&::placeholder {
					color: $color_gray-light;
				}
			}

			select {
				appearance: menulist;
			}

			textarea {
				width: 100%;
				max-width: 100%;
				min-width: 100%;
				height: 120px;

				&::placeholder {
					color: $color_gray-light;
				}
			}

			.evf-field-description,
			.everest-forms-field-limit-text {
				line-height: 1.7;
				margin-bottom: 10px;
				font-size: $font_size-label;
			}
		}
	}

	button,
	input[type='submit'],
	button[type='submit'],
	.everest-forms-part-button {
		color: #555;
		height: auto;
		cursor: pointer;
		background: none;
		box-shadow: none;
		font-size: inherit;
		font-weight: 400;
		line-height: 1.5;
		padding: 10px 15px;
		border-radius: 3px;
		border: 1px solid #ccc;
		background-color: #f7f7f7;

		&:hover,
		&:active {
			outline: none;
			color: #23282d;
			background-color: #eee;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;

			&:hover {
				color: #555;
				background-color: #f7f7f7;
			}
		}
	}

	.layout-two {
		label {
			margin-bottom: 0;
		}

		.evf-field-checkbox,
		.evf-field-radio {
			label {
				margin-bottom: 20px;
			}
		}

		input,
		select,
		textarea,
		canvas.evf-signature-canvas {
			border-radius: 0;
			border-top: none transparent;
			border-right: none transparent;
			border-left: none transparent;
			border-bottom: 1px solid $color_gray-light;
			padding: 10px 0;

			&:focus {
				outline: none;
				border-top: none transparent;
				border-right: none transparent;
				border-left: none transparent;
			}
		}

		textarea {
			height: 100px;
		}
	}

	/**
	 * Notices.
	 */
	.everest-forms-notice {
		padding: 1em 3em;
		margin: 0 0 2em;
		position: relative;
		background-color: $blue;
		color: $color-white;
		border-radius: 5px;
		@include clearfix();

		&::before {
			font-family: dashicons;
			content: '\f348';
			position: absolute;
			top: 1em;
			left: 1.5em;
			color: inherit;
		}

		.button {
			float: right;
		}

		p {
			margin-bottom: 0;
		}

		a {
			color: $color-white;
		}

		li {
			list-style: none outside !important; // Required for default theme compatibility
			padding-left: 0 !important; // Required for default theme compatibility
			margin-left: 0 !important; // Required for default theme compatibility
		}

		&.everst-forms-form-disable-notice {
			color: $color_gray-base;
			background: lighten($orange, 47%);
			border: 1px solid adjust-color($orange, $saturation: -15%, $lightness: +20%);
		}
	}

	.everest-forms-notice--success {
		background-color: $green;

		&::before {
			content: '\f147';
		}
	}

	.everest-forms-notice--error {
		background-color: $red;

		&::before {
			content: '\f534';
			color: inherit;
		}

		.everest-forms-notice-list {
			margin: 0;
			list-style: none outside;

			.everest-forms-notice-list__item {
				margin-bottom: 0.5em;
			}
			.everest-forms-notice-list__item:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/**
 * Gutenberg Block
 */

.edit-post-visual-editor {
	.everest-form-gutenberg-form-selector-wrap {
		align-items: center;

		.components-placeholder__label {
			margin-bottom: 0;

			svg {
				width: 75px;
				height: 75px;
				color: #7e3bd0;
			}
		}

		.components-placeholder__instructions {
			color: #23282d;
			font-size: 1.3em;
			font-weight: 600;
		}

		.components-placeholder__fieldset {
			.components-base-control {
				width: 100%;
				text-align: center;
			}
		}
	}
}

div.evf-gutenberg-form-selector .evf-frontend-row input:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row textarea:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row select:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row button[type='submit']:disabled {
	cursor: not-allowed;
}

/**
 * Anti-spam Honeypot and reCAPTCHA Area
 */
.evf-honeypot-container {
	display: none !important;
	position: absolute !important;
	left: -9000px !important;
}

.evf-recaptcha-container {
	clear: both;
	margin-bottom: 30px;

	.evf-error {
		margin-top: 15px;
		margin-bottom: 0;
		font-weight: 300;
		line-height: 1.7;
		padding: 7px 10px;
		border-radius: 3px;
		display: inline-block;
		color: darken($red, 10%);
		border: 1px solid $red;
		background-color: lighten($red, 35%);
	}

	&.recaptcha-hidden {
		margin: 0;
	}
}

/* Small devices */
@media only screen and (max-width: 600px) {
	.evf-container .evf-field > * {
		max-width: 100%;
	}
	.evf-container .evf-field:not(.evf-field-phone) {
		overflow-x: hidden;
	}
}

@media screen and (min-width: 768px) {
	.everest-forms {
		.evf-field-container {
			.evf-frontend-row {
				.evf-frontend-grid {
					&.evf-grid-2 {
						flex: 0 0 50%;
						max-width: 50%;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.everest-forms {
		.evf-field-container {
			.evf-frontend-row {
				flex-direction: column;
				margin: 0;

				.evf-frontend-grid {
					padding: 0;

					&:last-child {
						margin-bottom: 0;
					}

					&.evf-grid-2,
					&.evf-grid-3 {
						width: 100%;
						max-width: 100%;
					}
				}
			}
		}

		.evf-recaptcha-container {
			margin: 25px 0;
		}
	}
}
