// sass-lint:disable class-name-format no-qualifying-elements id-name-format
@use "sass:color";
@use 'variables';
@use 'mixins';

.ctct-modal {
	@include mixins.clearfix;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background-color: variables.$color-modal-background;
	bottom: 0;
	display: none;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9999;

	h2 {
		font-size: 28px;
		font-weight: 400;
		line-height: 1.2;
		margin: 0;

		img {
			display: block;
			max-width: 300px;
		}
	}

	h3 {
		color: color.adjust( variables.$color-prussian-blue, $lightness: -10% );
		font-size: 18px;
		line-height: 1.2;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	p {
		color: variables.$color-modal-text;
		font-size: 14.7px;
	}

	&.ctct-modal-open {
		display: block;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.ctct-modal-dialog {
		left: 50%;
		max-width: 760px;
		position: absolute;
		top: 50%;
		transform: translate( -50%, -50% );
		width: 100%;

		@media screen and (max-width: 1024px) {
			max-width: 75%;
		}

		@media screen and (max-width: 782px) {
			left: 7.5%;
			margin-bottom: 15%;
			max-width: 85%;
			top: 15%;
			transform: translate( 0, 0 );
		}
	}

	.ctct-modal-content {
		background-clip: padding-box;
		background-color: variables.$color-white;
		border-radius: 8px;
		box-shadow: 0 0 15px 0 variables.$color-modal-background;
		padding: 0;
		position: relative;

		.ctct-modal-header {
			background: variables.$color-lighter-gray;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 30px;
			text-align: center;
			border-bottom: 1px solid variables.$color-white;

			p {
				font-size: 16px;
				margin-bottom: 0;

				.displayed-shortcode {
					color: variables.$color-modal-header;
				}
			}

			.ctct-modal-close {
				@include mixins.clearfix;
				color: variables.$color-black;
				cursor: pointer;
				font-size: 26px;
				line-height: 0;
				margin: 0;
				padding: 0;
				position: absolute;
				right: 15px;
				top: 15px;
				text-decoration: none;
				width: 24px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.ctct-modal-footer {
			background-color: variables.$color-lighter-gray;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			border-top: 1px solid variables.$color-white;
			padding: 20px;
			text-align: center;

			p {
				font-size: 16px;
				margin: 0;
			}

			a {
				color: variables.$color-prussian-blue;
				text-decoration: underline;

				&:focus {
					outline: 1px dotted variables.$color-black;
				}
			}

			&.ctct-modal-footer-privacy a {
				text-decoration: none;

				&:focus {
					outline: 1px dotted variables.$color-black;
				}
			}

			.button {
				border-radius: 4px;
				color: variables.$color-white;
				font-size: 16px;
				font-weight: 600;
				height: auto;
				line-height: 1;
				margin-bottom: 10px;
				min-width: 180px;
				padding: 14px 30px;

				&.no-bg {
					border: none;
					box-shadow: none;
					color: variables.$color-prussian-blue;
					background-color: variables.$color-white;
				}

				&.button-orange {
					background-color: variables.$color-chrome-yellow;
					border: 1px solid color.adjust( variables.$color-chrome-yellow, $lightness: -10% );

					&:hover,
					&:focus {
						background-color: color.adjust( variables.$color-chrome-yellow, $lightness: -10% );
					}
				}

				&.button-blue {
					background-color: variables.$color-prussian-blue;
					border: 1px solid color.adjust( variables.$color-prussian-blue, $lightness: -10% );

					&:hover,
					&:focus {
						background-color: color.adjust( variables.$color-prussian-blue, $lightness: -10% );
					}
				}
			}
		}

		.ctct-modal-body {
			@include mixins.clearfix;
			padding: 15px;
			position: relative;

			&.ctct-privacy-modal-body {
				height: 350px;
				overflow-y: auto;
			}

			.ctct-modal-left,
			.ctct-modal-right {
				box-sizing: border-box;
				float: left;
				padding: 15px 50px;
				text-align: center;
				width: 50%;

				@media screen and (max-width: 782px) {
					float: none;
					width: 100%;
				}

				img,
				svg {

					&.ctct-modal-flare {
						height: auto;
						max-width: 120px;
					}
				}

				p {
					margin: 0 auto 25px;
					max-width: 90%;

					&.small {
						line-height: 1;
						margin: 0;
						max-width: 100%;
					}
				}

				small {
					font-style: italic;
				}
			}

			.now-what {
				text-align: center;
			}

			.ctct-modal-left {
				border-right: 1px solid variables.$color-alt-silver;

				@media screen and (max-width: 782px) {
					border-bottom: 1px solid variables.$color-alt-silver;
					border-right: 0;
				}
			}

			.ctct-modal-right {
				border-left: 2px solid variables.$color-alt-silver;

				@media screen and (max-width: 782px) {
					border-left: 0;
					border-top: 1px solid variables.$color-alt-silver;
				}
			}

			&.ctct-custom-textarea {

				.ctct-modal-left {
					border: none;
					padding-left: 15px;
					text-align: left;
				}

				.ctct-modal-right {
					border: none;
					padding: 15px;
				}
			}

			.button {
				border-radius: 4px;
				color: variables.$color-white;
				font-size: 16px;
				font-weight: 600;
				height: auto;
				line-height: 1;
				margin-bottom: 10px;
				min-width: 180px;
				padding: 14px 30px;

				&.button-orange {
					background-color: variables.$color-chrome-yellow;
					border: 1px solid color.adjust(variables.$color-chrome-yellow, $lightness: -10%);

					&:hover,
					&:focus {
						background-color: color.adjust(variables.$color-chrome-yellow, $lightness: -10%);
					}
				}

				&.button-blue {
					background-color: variables.$color-prussian-blue;
					border: 1px solid color.adjust(variables.$color-prussian-blue, $lightness: -10%);

					&:hover,
					&:focus {
						background-color: color.adjust(variables.$color-prussian-blue, $lightness: -10%);
					}
				}
			}

			.privacy-center-container a.button {
				color: variables.$color-modal-text;
			}
		}
	}
}