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

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

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

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

	p {
		color: $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: $color-white;
		border-radius: 8px;
		box-shadow: 0 0 15px 0 $color-modal-background;
		padding: 0;
		position: relative;

		.ctct-modal-header {
			background: $color-sky-blue url('../images/cc-modal-bg.png') 50% 50% no-repeat;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 65px 20px 40px;
			text-align: center;

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

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

			.ctct-logo {
				img {
					max-width: 75%;
				}
			}

			.ctct-modal-close {
				@include clearfix;
				color: $color-white;
				cursor: pointer;
				font-size: 26px;
				height: 16px;
				line-height: 0;
				margin: 0;
				padding: 0;
				position: absolute;
				right: 10px;
				text-decoration: none;
				top:  18px;
				width: 16px;
			}
		}

		.ctct-modal-footer {
			background-color: $color-alt-silver;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			border-top: 3px solid $color-white;
			padding: 15px 15px 18px;
			text-align: center;

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

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

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

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

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

			.button {
				border-radius: 4px;
				color: $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: $color-prussian-blue;
				}

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

					&:hover,
					&:focus {
						background-color: darken( $color-chrome-yellow, 10% );
					}
				}

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

					&:hover,
					&:focus {
						background-color: darken( $color-prussian-blue, 10% );
					}
				}
			}
		}

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

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

			.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 $color-alt-silver;

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

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

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

			&.ctct-custom-textarea {

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

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

					img {
						max-width: 100%;
					}
				}
			}

			.button {
				border-radius: 4px;
				color: $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: $color-chrome-yellow;
					border: 1px solid darken($color-chrome-yellow, 10%);

					&:hover,
					&:focus {
						background-color: darken($color-chrome-yellow, 10%);
					}
				}

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

					&:hover,
					&:focus {
						background-color: darken($color-prussian-blue, 10%);
					}
				}
			}

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