@import 'variables';
@import 'mixins';

// start modal
.ctct-modal {
	@include clearfix;

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background-color: rgba(0,0,0,0.3);
	bottom: 0;
	display: none;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9999;

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

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

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

	// When the .modal-open class is set.
	&.ctct-modal-open {
		display: block;
		overflow-x: hidden;
		overflow-y: auto;
	} // modal open

	// Center the modal container.
	.ctct-modal-dialog {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		max-width: 720px;

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

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

	// The modal content container.
	.ctct-modal-content {
		background-clip: padding-box;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
		outline: 0;
		padding: rem(10);
		position: relative;

		// The modal header container.
		.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-modal-header;
				font-size: 16px;
				margin-bottom: 0;
			} // p

			// Close "X" button.
			.ctct-modal-close {
				@include clearfix;

				color: #ffffff;
				cursor: pointer;
				font-size: 26px;
				height: 16px;
				line-height: 0;
				margin: 0;
				outline: none;
				padding: 0;
				padding: 0;
				position: absolute;
				right: 10px;
				text-decoration: none;
				top:  18px;
				width: 16px;
			} // modal close
		} // modal header

		// No thanks
		.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; // line-height fix
			text-align: center;

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

			a {
				color: $color-prussian-blue;
				text-decoration: underline;
			} // a
		} // modal no thanks

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

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

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

    			img,
    			svg {

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

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

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

    			small {
    				font-style: italic;
    			} // small
			} // left/right

			.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;
				}
			} // left

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

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

			.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 orange

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

					&:hover,
					&:focus {
						background-color: darken($color-prussian-blue, 10%);
					}
				} // button blue
			} // button
		} // modal-body
	} // modal content
} // modal