@import "../../../../_common/scss/main";
@import "base";
@import "compass/css3/transform";

/*
 * Animation and some css adapted from https://github.com/likeastore/ngDialog/blob/master/css/ngDialog-theme-default.css
 */

@-webkit-keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.ngdialog {

	.ngdialog-content {
		@include transform(translate(0,0));
		-webkit-animation: ngdialog-flyin .5s;
		animation: ngdialog-flyin .5s;
	}

	&.ngdialog-closing {
		.ngdialog-content {
			-webkit-animation: ngdialog-flyout .5s;
			animation: ngdialog-flyout .5s;
		}
	}
}

.dcom {
	.ngdialog-overlay {
		background: $modal-overlay-background;
	}

	.ngdialog-content {
		position: relative;
		margin: 10px 10px;
		padding: 30px 20px;
		border-radius: 3px;
		font-family: $main-font-family;
		color: $primary-text-color;
		font-size: $font-size-main;
		line-height: $primary-line-height;
		background: $modal-page-background;
		box-shadow: 0 3px 9px rgba(0,0,0,.5);
		outline: 0;

		@media (min-width: $site-width-mobile-large) {
			margin-top: 60px;
		}

		@include tablet {
		    box-shadow: 0 5px 15px rgba(0,0,0,.5);
		}
	}

	.ngdialog-close {
		position: absolute;
		top: 10px;
		right: 10px;

		&:before {
			color: $primary-color;
			display: block;
			font-family: $main-font-family;
			font-size: 36px;
			line-height: 21px;
			width: 21px;
			height: 21px;
		}
	}

	.modal-header {
		text-align: center;
		color: $primary-color;

		h3 {
			font-size: 18px;
			line-height: 24px;
			margin: 0px;
		}
	}

	.modal-footer {
		text-align: center;
	}

	&.small {
		.ngdialog-content {
			@media (min-width: 2 * $modal-left-right-gutter + $modal-width-small) {
				width: $modal-width-small;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}

	&.medium {
		.ngdialog-content {
			@media (min-width: 2 * $modal-left-right-gutter + $modal-width-medium) {
				width: $modal-width-medium;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}

	&.large {
		.ngdialog-content {
			@media (min-width: 2 * $modal-left-right-gutter + $modal-width-large) {
				width: $modal-width-large;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}
}