@import "./_partials/variables";
@import "./_partials/mixins";
@import "../src/block/lib/datePicker.scss";
@import "./_partials/extend_fields";

@keyframes slideInLeft {
	0% {
		transform: translate3d(-30%, 0, 0);
		opacity: 0;
		visibility: visible;
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}
@keyframes slideInRight {
	0% {
		transform: translate3d(30%, 0, 0);
		opacity: 0;
		visibility: visible;
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}

@keyframes fadeOut {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

html {
	scroll-behavior: smooth;
}

@media (max-width: 600px) {
	.cwp-form {
		& .cwp-form-col-main-preview {
			&.cwp_stack_columns {
				flex-direction: column !important;
				& .cwp-col {
					width: 100% !important;
					margin: 0px 0px 0px 0px !important;
				}
			}
		}
	}
}

@mixin getColumn($col) {
	& .cwp-col {
		width: calc((100% / #{$col}) - 20px);
		&:nth-child(1) {
			margin: 0px 10px 0px 0px;
			width: calc((100% / #{$col}) - 10px);
		}

		&:not(:nth-child(1)) {
			margin: 0px 10px;
		}

		&:nth-child(#{$col}) {
			width: calc((100% / #{$col}) - 10px);
			margin: 0px 0px 0px 10px;
		}
	}
}

.wp-block-cwp-block-gutenberg-forms {
	&.is-style-paper {
		@include paper();
	}

	& .cwp-form {
		.cwp-gutenberg-form.cwp-progress-bar {
			@include Progressbar("frontend");
		}

		.cwp-fade-step {
			& .cwp-form-step {
				&:not(cwp-active-step) {
					opacity: 0;
					visibility: hidden;
					padding: 0px;
					border: none;
					height: 0px;
				}

				&.cwp-active-step {
					transition: 0.5s opacity;
					opacity: 1 !important;
					height: 100%;
					visibility: visible;
				}
			}
		}

		.cwp-slide-step {
			& .cwp-form-step {
				&:not(cwp-active-step) {
					opacity: 0;
					visibility: hidden;
					padding: 0px;
					border: none;
					height: 0px;
				}

				&.cwp-active-step {
					transition: 0.5s transform;
					opacity: 1;
					height: 100%;
					visibility: visible;

					&.from-before {
						animation: slideInLeft 1s;
					}

					&.from-next {
						animation: slideInRight 1s;
					}
				}
			}
		}

		.cwp-noEffect-step {
			& .cwp-form-step {
				display: none;
				padding: 0px;
				border: none;

				&.cwp-active-step {
					display: block;
				}
			}
		}

		& .wp-block-cwp-form-button {
			@include normalize_button();
		}

		& .cwp-success {
			@include successMessage();
		}

		& fieldset.cwp-form-group {
			@include group();
		}

		& .cwp-hidden {
			display: none;
		}

		& .cwp-form-col-main-preview {
			display: flex;
			flex-direction: row;

			&[data-cols="2"] {
				@include getColumn(2);
			}

			&[data-cols="3"] {
				@include getColumn(3);
			}

			&[data-cols="4"] {
				@include getColumn(4);
			}
		}

		& .cwp-field {
			.cwp-field-with-elements {
				display: table;
				width: 100%;
				position: relative;
			}

			.cwp-suffix {
				@include Suffix();
			}

			.cwp-prefix {
				@include Prefix();
			}

			& .cwp-range-set {
				display: flex;
				flex-direction: row;

				& input[type="number"] {
					flex: 1;
					width: auto;
					margin: 0px 0px 0px 15px;
				}
			}

			&.cwp-calculation {
				& .cwp-field-set {
					display: flex;
					flex-direction: column;

					& span {
						font-size: 40px;
					}
				}
			}

			&.is-style-button {
				& .cwp-checkbox-set {
					@include buttonStyle();
				}

				& .cwp-radio-set {
					@include buttonStyle();
				}
			}

			&.is-style-inline {
				& .cwp-field-set,
				& .cwp-radio-set,
				& .cwp-checkbox-set:not(.cwp-checkbox-set-backend),
				& .cwp-select-set {
					@include inline-field(0px 20px 0px 0px);
				}

				& .cwp-checkbox-set.cwp-checkbox-set-backend.cwp-checkbox-set-preview {
					@include inline-field(0px);
				}

				& .cwp-radio-set-preview {
					@include inline-field(0px);
				}
			}

			& .cwp-field-set {
				& .cwp-error {
					color: $danger;
				}

				@include field();
			}

			&.cwp-captcha {
				@include captcha();
			}

			&.cwp-yes-no {
				& .cwp-field-set {
					@include switch();
				}
			}

			& .cwp-checkbox-set {
				margin: 20px 0px !important;
				@include checkbox-field("frontend");
			}

			& .cwp-radio-set {
				margin: 20px 0px !important;

				@include radio-field("frontend");
			}

			& .cwp-select-set {
				margin: 20px 0px !important;

				@include select-field("frontend");
			}
		}

		& .g-recaptcha {
			margin: 20px 0px;
		}

		& .cwp-submit {
			padding: 20px 0px;
			display: flex;
			@include buttonAlignment();
			& .cwp-submit-btn {
				@include defaultSubmit();
			}
		}

		& .cwp-danger-captcha {
			background-color: #ed9898;
			border-left: 2px solid $danger;
			padding: 12px 12px;
			color: #fff;
		}

		& .cwp-hidden.spam {
			@include Alert(orange);
		}

		& .cwp-hidden.error {
			@include Alert(red);
		}
	}

	.cwp-warning {
		display: flex;
		flex-direction: row;
		background: #fff3cd;
		color: #856404;
		padding: 15px;

		& div:nth-child(1) {
			margin: 3px 5px 0px 0px;
		}
	}
}