/**
name: Modal Box
type: ui
desc: >
      Shows content in a Lightbox. Adds overlay around the content.

      There are some additional options(classes) for Prequalification page and Agent View.
modifiers:
      .pre-lightbox: Additional class for Prequalification Lightbox
      .modal-box--size-small: Additional class for popup size small.
      .modal-box--size-large: Additional classes for popup size large.
      .modal-box--with-action-buttons: New style action buttons.
examples:
  - name: Simple Lightbox
    tmpl:
        include: popup.html
  - name: Prequalification Lightbox
    tmpl:
        include: pre-lightbox.html
  - name: Large popup (3 buttons)
    tmpl:
        include: popup-large.html
  - name: Small popup
    tmpl:
        include: popup-small.html
  - name: Extra Small popup
    tmpl:
        include: popup-xsmall.html
*/

/* prevent showing popup content before JS is working */
[data-component="modal-box"] {
	display: none;
}

.modal-box {
	$root: &;

	&__overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	    @include zindex(overlay);
		display: none;
		background: rgba(0, 0, 0, .75);
		overflow-x: hidden;
		overflow-y: auto;
		text-align: center;
	    @if $enable-ie9{
		  flex-wrap: wrap;
		  justify-content: center;
		  align-items: center;
		}

		@include until($bp-medium) {
		  position: absolute;
		}

		&#{$root}--is-open {
		  @if $enable-ie9{
			display: flex;
		  } @else {
			display: block;
		  }
			#{$root}__content {
				display: block;
			}
		}
	}

	&__content {
		padding: 40px;
		background-color: $color-white;
		display: none;
		max-width: 1200px;
		max-height: 95vh;
		overflow: auto;
		position: fixed;
	    left:50%;
	    top:50%;
	    transform: translate(-50%,-50%);
		text-align: left;
	    @include zindex(modal);

	  	&--full{
		    padding:0;
			#{$root}__close-btn.with-border {
			  font-size:15px;
			  top:50%;
			  transform: translate(0,-50%);
			}
		}

		@include until($bp-medium) {
			width: 100%;
			padding-right: 40px;
			top: 0;
			left: 0;
			min-height: 100vh;
			overflow: hidden;
			overflow-y: auto;
		}

		#{$root}--error & {
			color: $color-white;
			background: linear-gradient(to bottom, #00a7e4 0%,#3361ac 100%);
			text-align: center;
			box-shadow: 0 4px 4px -4px rgba(0,0,0,0.5);
		}

		&.pre-lightbox {
			backface-visibility: hidden;
			border-radius: 0;
			background: url("../img/bg-popup.png") no-repeat;
			background-color: $color-telenor-blue !important;
			background-size: cover;
			width: 620px;
			padding: $xlarge-spacing-unit !important;
			overflow: visible;
			text-align: center;
			max-height: none;
			box-shadow: 0 4px 4px -4px rgba(0,0,0,0.5);


			 @include until($bp-medium) {
				padding: $base-spacing-unit !important;
			}

			.button-holder {
				vertical-align: bottom !important;
			}

			#{$root}__close-btn {
				color: $color-white;
				//font-size: 16px;
			}

			.tooltip__trigger.icon-questionmark {
				padding: 0 0 0 10px;

				&:before {
					color: $color-white;
				}

			}

			.button {
				line-height: 40px;
			}

			@include until($bp-medium) {
				width: 100%;
				top: 0;
				left: 0;
				transform: translate(0, 0);
				min-height: 100vh;
			}
		}
	}

	&__close-btn {
	  width:20px;
	  height:20px;
	  color: $color-stone-grey;
	  border-radius: 10px;
	  font-size: 13px;
	  line-height: 12px;
	  padding: 3px 3px 0 0;
	  text-align: right;
	  position: absolute;
	  right: 15px;
	  top: 12px;
	  cursor: pointer;
	  z-index: 1;

		@include until($bp-medium) {
			right: 10px;
		}

		&--white,
		#{$root}--error & {
			color: $color-white;
		}

		#{$root}--with-action-buttons &,
		#{$root}--is-loading & {
			display: none;
		}
	}

	&__icon-box {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		border-radius: 50%;
		width: 110px;
		height: 110px;
		font-size: 60px;

		.icon {
			@extend %icon-absolute-center;
			line-height: 1;
		}

		.icon-reject {
			font-size: 40px;
		}

		&--blue {
			background: $color-telenor-blue;
			color: $color-white;
		}

		&--yellow {
			background: $color-telenor-yellow;
		}

		&--small {
			width: 80px;
			height: 80px;
			font-size: 45px;
		}

		&--info {
			position: absolute;
			top: 0;
			right: -6px;
			width: 30px;
			height: 30px;
			font-size: 18px;
		}
	}

	&__action-buttons {
		@if $enable-ie9 {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-around;
		} @else {
		  display: table;
		  table-layout: fixed;
	    }

		margin-left: -5px;
		margin-right: -5px;

		@include until($bp-medium) {
			display: block;
			margin-left: 0;
			margin-right: 0;
		}

		li {
		    @if $enable-ie9 {
			  flex: 1 0 0;
			} @else {
			  display: table-cell;
			  width:50%;
			}

			padding: 0 5px;
			max-width: 50%;

			@include until($bp-medium) {
				padding: 0 0 5px;
			}
		}

		.button {
			width: 100%;
		}
	}

	&__container {
		word-wrap: break-word;
		padding: 40px 20px 30px;
	}

	&--error {
	  @include zindex(modal);
	}

	&--print-contract {
		margin-top: 0;
		max-width: 620px;
		padding: $base-spacing-unit $xlarge-spacing-unit;
	}

	&--with-action-buttons {
		padding: 0;

		.gradient-line:before {
			margin: 0;
		}
	}

	&--size-small {
		width: 420px;

		@include until($bp-medium) {
			width: 100%;
		}
	}

	&--size-xsmall {
		width: 340px;

		@include until($bp-medium) {
			width: 100%;
		}
	}

	&--size-large {
		width: 640px;

		@include until($bp-medium) {
			width: 100%;
		}
	}
	&--size-xlarge {
	  width: 980px;

	  @include until($bp-medium) {
		width: 100%;
	  }
	}

	&--is-loading {
		padding: 40px 80px;
	}

	@at-root {
		body#{$root}--is-open {
			overflow: hidden;
		}
	}
}