@-webkit-keyframes mcf-autofill {
	to {
		color: #fff;
		background: rgba(0, 0, 0, 0.07)
	}
}

.tm-mailchimp-form {

	.form-title,
	.form-description {
		display: none;
	}

	input[type='email'] {
		&::-webkit-input-placeholder {
			color: inherit;
		}

		&:-moz-placeholder {
			color: inherit;
		}

		&::-moz-placeholder {
			color: inherit;
		}

		&:-ms-input-placeholder {
			color: inherit;
		}
	}

	.button-icon {
		@extend %FontAwesomeSolid;

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

	&.style-01 {
		text-align: center;

		.form-item-wrap {
			position: relative;
		}

		.form-item {
			margin-top: 30px;
		}

		input {
			text-align: center;
		}

		.button-icon {
			display: none;
		}

		.form-description {
			color: #fff;
			margin-top: 24px;
		}
	}

	&.style-02 {
		.form-item-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: -10px;
		}

		.form-item {
			padding: 10px;
		}

		input {
			color: #fff !important;
			border-color: transparent;
			background: rgba(0, 0, 0, 0.07) !important;
			min-width: 275px;

			&:focus {
				border-color: #fff;
			}
		}

		input:-webkit-autofill,
		input:-webkit-autofill:hover,
		input:-webkit-autofill:focus,
		input:-webkit-autofill:active,
		textarea:-webkit-autofill,
		select:-webkit-autofill {
			-webkit-animation-name: mcf-autofill;
			-webkit-animation-fill-mode: both;
		}

		.form-submit {
			background: #fff;
			min-width: 180px;
		}
	}

	&.style-03 {
		.form-item-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: -10px;
		}

		.form-item {
			padding: 10px;
		}

		input {
			min-width: 275px;
			background: #f6f5f9;
			color: #7e7e7e;
		}

		.form-submit {
			min-width: 180px;
		}
	}

	&.style-04 {
		.form-item-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: -10px;
		}

		.form-item {
			padding: 10px;
		}

		input {
			min-width: 275px;
			background: #fff;
			color: #7e7e7e;

			&:focus {
				background: #fff;
			}
		}

		.form-submit {
			min-width: 180px;
		}
	}

	&.style-05 {
		.form-item-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: -10px;
		}

		.form-item {
			width: 100%;
			padding: 10px;
		}

		input {
			background: #fff;
			color: #7e7e7e;

			&:focus {
				background: #fff;
			}
		}

		.form-submit {
			width: 100%;

			.button-icon {
				display: none;
			}
		}
	}

	&.style-06 {
		.form-item-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: -10px;
		}

		.form-item {
			width: 100%;
			padding: 10px;
		}

		.form-submit {
			.button-icon {
				display: none;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-mailchimp-form {
		&.style-02,
		&.style-03,
		&.style-04 {
			.form-item-wrap {
				display: block;
			}

			.form-submit {
				display: block;
				margin: 0 auto;
			}
		}
	}
}