#mwai-form-id {
	--mwai-spacing: 15px;
	--mwai-fontSize: 15px;
	--mwai-borderRadius: 10px;
	--mwai-fontColor: #FFFFFF;
	--mwai-backgroundPrimaryColor: #454654;
	--mwai-backgroundSecondaryColor: #343541;
	--mwai-aiAvatarBackgroundColor: #10a37f;
	--mwai-userAvatarBackgroundColor: #135ea4;
	--mwai-headerButtonsColor: #FFFFFF;
	--mwai-errorBackgroundColor: #6d2f2a;
	--mwai-errorTextColor: #FFFFFF;
}

#mwai-form-id {
	padding: var(--mwai-spacing);
	font-size: var(--mwai-fontSize);
	color: var(--mwai-fontColor);
	background: var(--mwai-backgroundSecondaryColor);
	border-radius: var(--mwai-borderRadius);
	
	* {
		box-sizing: border-box;
	}

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;

		input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="search"], input[type="time"], input[type="week"], select, textarea {
			padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
			border: 0;
			width: 100%;
			border-radius: var(--mwai-borderRadius);
			font-size: var(--mwai-fontSize);
			background: var(--mwai-backgroundPrimaryColor);
			color: var(--mwai-fontColor);
		}

		select {
			padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
			border: 0;
			width: 100%;
			border-radius: var(--mwai-borderRadius);
			font-size: var(--mwai-fontSize);
			background: var(--mwai-backgroundPrimaryColor);
			color: var(--mwai-fontColor);
		}

		textarea {
			padding: calc(var(--mwai-spacing) * 2 / 3) var(--mwai-spacing);
			border: 0;
			width: 100%;
			border-radius: var(--mwai-borderRadius);
			font-family: inherit;
			font-size: var(--mwai-fontSize);
			background: var(--mwai-backgroundPrimaryColor);
			color: var(--mwai-fontColor);
		}

		input[disabled], select[disabled], textarea[disabled] {
			opacity: 0.25;
		}
	}

	.mwai-form-submit {

		button {
			height: 45px;
			background: none;
			width: 100%;
			color: var(--mwai-fontColor);
			font-size: var(--mwai-fontSize);
			background-color: var(--mwai-backgroundSecondaryColor);
			border: 1px solid var(--mwai-backgroundPrimaryColor);
			border-radius: var(--mwai-borderRadius);
			cursor: pointer;
			transition: all 0.2s ease-out;
			position: relative;

			&:hover {
				background: var(--mwai-backgroundPrimaryColor);
			}
		}

		button[disabled] {
			span {
				opacity: 0.25;
			}

			&:hover {
				background: none;
				cursor: not-allowed;
			}
		}

		&.mwai-loading {

			button {
				
				span {
					opacity: 0;
				}
	
				&::after {
					content: '';
					position: absolute;
					width: 18px;
					height: 18px;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					border: 3px solid transparent;
					border-top-color: var(--mwai-fontColor);
					border-radius: 50%;
					animation: mwai-button-spinner 1s ease infinite;
				}
			}
		}
	}

	.mwai-form-output-container {
		
		.mwai-form-output {
			font-size: var(--mwai-fontSize);
			position: relative;
			margin-top: var(--mwai-spacing);
			padding: var(--mwai-spacing);
			border: 1px solid var(--mwai-backgroundPrimaryColor);

			&.mwai-error {
				background: var(--mwai-errorBackgroundColor);
				color: var(--mwai-errorFontColor);
			}

			& > *:first-child {
				margin-top: 0;
			}

			& > *:last-child {
				margin-bottom: 0;
			}
	
			img {
				max-width: 33%;
			}

			div {
				& > *:first-child {
					margin-top: 0;
				}
	
				& > *:last-child {
					margin-bottom: 0;
				}
			}
		}

		.mwai-copy-button {
			opacity: 0;
			transition: all 0.3s ease-out;
			width: 22px;
			height: 22px;
			position: absolute;
			right: var(--mwai-spacing);
			top: var(--mwai-spacing);
			
			.mwai-copy-button-one {
				position: absolute;
				width: 16px;
				height: 16px;
				margin-top: 0px;
				margin-left: 0px;
				background: white;
				opacity: 0.4;
				transition: all 0.2s ease-in;
				cursor: pointer;
				border-radius: 2px;
			}

			.mwai-copy-button-two {
				position: absolute;
				width: 16px;
				height: 16px;
				margin-top: 6px;
				margin-left: 6px;
				background: white;
				opacity: 0.6;
				transition: all 0.2s ease-in;
				cursor: pointer;
				border-radius: 2px;
			}

			&:hover {
				.mwai-copy-button-one {
					opacity: 0.6;
					margin-top: 0px;
    			margin-left: 6px;
				}

				.mwai-copy-button-two {
					opacity: 1;
					margin-top: 6px;
					margin-left: 0px;
				}
			}

			&.mwai-animate {

				.mwai-copy-button-one {
					opacity: 0;
				}

				.mwai-copy-button-two {
					width: 18px;
					height: 18px;
					margin-top: 2px;
					margin-left: 2px;
					opacity: 1;
				}
			}
		}

		&:hover {
			.mwai-copy-button {
				opacity: 1;
			}
		}

		&.mwai-has-content {
			display: block;
		}
	}

	.wp-block-columns {
		margin: 0;
	}

}

@keyframes mwai-button-spinner {

	from {
		transform: rotate(0turn);
	}
	to {
		transform: rotate(1turn);
	}
}