/*
 * Modals
 */
/* overlay covers everything */
$modal-width: 50% !default;
$modal-max-width: 70rem !default;

$modal-breakpoint-width: 52em !default;
$modal-breakpoint-height: 22em !default;
$breakpoint-low-height-modal: em(500, 16) !default;

$modal-max-height: 80% !default;

$modal-wider-width: 70% !default;
$modal-wider-max-width: 100rem !default;

$modal-full-dimension: 98% !default;
$modal-full-max-width: 150rem !default;

$modal-smaller-width: 28em !default;

.pm-modalOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba( 0, 0, 0, .4 );
  z-index: 666;
  animation: pm-modalOverlayIn ease .5s 1 normal ;
}

.pm-modalContainer {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 666;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.pm-modalContainer--inBackground {
  z-index: 600;
}

.pm-modalOverlayOut {
  animation: pm-modalOverlayOut ease .5s 1  normal ;
  animation-fill-mode: forwards;
}


@keyframes pm-modalOverlayIn {
  0% {
    background: rgba( 0, 0, 0, 0 );
  }
  100% {
    background: rgba( 0, 0, 0, .4 );
  }
}

@keyframes pm-modalOverlayOut {
  0% {
    background: rgba( 0, 0, 0, .4 );
  }
  100% {
    background: rgba( 0, 0, 0, 0 );
  }
}

.pm-modal {
  position: relative;
  width: $modal-max-width;
  max-height: $modal-max-height;
  max-width: $modal-max-width;
  background: var(--bgcolor-main-area, $white);
  color: var(--color-main-area, $pm-global-grey);
  padding: 0;
  overflow: hidden;
  border-radius: $global-border-radius;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3);
  animation: pm-modalIn ease .15s 1 normal;
  animation-fill-mode: both;
  animation-delay: .1s; // stupid fix for Safari crazy display bug
  margin: auto;
  display: flex;
  flex-direction: column;
  cursor: default;
}

@keyframes pm-modalIn {
  0% {
    opacity: 0;
	  transform: scale(.8);
  }
  100% {
    opacity: 1;
	  transform: scale(1);
  }
}

@keyframes pm-modalOut {
  0% {
    opacity: 1;
	  transform: scale(1);
  }
  100% {
    opacity: 0;
	  transform: scale(.8);
  }
}

.pm-modalOut {
  animation: pm-modalOut ease .15s 1 normal ;
  animation-fill-mode: both;
}

.pm-modal--auto {
  width: auto;
}
.pm-modal--smaller {
  width: $modal-smaller-width;
}
.pm-modal--wider {
  width: $modal-wider-width;
  max-width: $modal-wider-max-width;
}
.pm-modal--full {
  width: $modal-full-dimension;
  max-width: $modal-full-dimension;
  height: $modal-full-dimension;
  max-height: $modal-full-dimension;
  margin: 1%;
}
.pm-modal--heightAuto {
	height: auto;
	max-height: $modal-full-dimension;
	margin-top: 1%;
	margin-bottom: 1%;
}




.pm-modalClose {
  position: absolute;
  right: .5rem;
  top: .5rem;
  @extend .flex;
  overflow: hidden;
  background: transparent;
  border-radius: 1em;
  border: 0;
  font-size: 1em;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

// not defined, left this in case of
// .pm-modalClose:focus,
// .pm-modalClose:hover,
// .pm-modalClose:active {
// }
// .pm-modalClose:hover,
// .pm-modalClose:active {
// }
@if $rtl-option == true {
  [dir="rtl"] {
    .pm-modalClose {
      left: .5rem;
      right: auto;
    }
  }
}

.pm-modalContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}

.pm-modalHeader {
  padding: rem(30) rem(30) rem(15) rem(30);
  flex: 0;
}
.pm-modalTitle {
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.pm-modalFooter {
  padding: rem(15) rem(30) rem(30);
  flex: 0;

  min-height: 7.9rem; // only for Safari the ugly
  [class*="pm-button"] { // only for Safari the ugly
    min-height: 3.4rem;
  }
}

.pm-modalContentInner {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 0 rem(30);

  background: var(--bgcolor-main-area, $white) no-repeat;

  > p:first-child {
    margin-top: 0;
  }
  > p:last-child {
	margin-bottom: 0;
  }
}

// adaptation for labels
$pm-label-shorter-width: 10em !default;
.pm-modal--shorterLabels .pm-label {
  width: var(--label-shorter-width, $pm-label-shorter-width);
}

@include respond-to($breakpoint-small) {
  .pm-modal--shorterLabels .onmobile-flex-column .pm-label {
    width: 100%;
  }
}


// modal with title visually hidden
.pm-modalHeader--no-title {
	padding-top: 2rem;
}


// single button on right
.pm-modalFooter [class*="pm-button"]:only-child {
  margin-left: auto;
}
@if $rtl-option == true {
  [dir="rtl"] {
    .pm-modalFooter [class*="pm-button"]:only-child {
      margin-right: auto;
      margin-left: 0;
    }
  }
}

@media (max-height: $breakpoint-low-height-modal) {
  .pm-modal {
    max-height: $modal-full-dimension;
  }
  .pm-modalFooter {
	padding-bottom: 1rem;
	min-height: 5.9rem; // only for Safari the ugly
  }
  .pm-modalHeader {
    padding-top: 1rem;
    padding-bottom: .5rem;
  }
}


// small viewports
@media (max-width: $modal-breakpoint-width) {
  .pm-modal {
    margin: 1%;
    min-width: 0;
    width: 98%;
    max-width: 98%;
    max-height: 98%;
    align-self: center;
  }
}

@include respond-to($breakpoint-large, 'min') {
	.pm-modal--full {
		max-width: $modal-full-max-width;
		margin-left: auto;
		margin-right: auto;
	}
}