/*
* A Modal Component
*/

// ios/webkit has problems with animations when this is prefixed and enabled
.modal-container {
  backface-visibility: hidden;
}

/* Container that contains all Modals of an instance */
.modal-container {
  @include interface();
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  z-index: $indexModalContainer;
  &.front {
    z-index: $indexModalContainer +1;
  }
  display: none;
  &.open {
    display: block;
  }
  -webkit-overflow-scrolling: touch;
  min-height: 100%;

  // always show scrollbars
  overflow-y: scroll;

  > .loader-container {
    align-self: center;
    position: fixed;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    z-index: 101;
    @include animate(fadeIn);
  }

  &.loading {
    cursor: wait;
  }

  &:after {
    pointer-events:none;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba($backgroundDarkenerColor, $backgroundDarkenerFadeOpacity);
    will-change: opacity;
    backface-visibility: hidden;
  }

  &.backdrop {
    &:after {
      @include animate(fadeIn);
    }
  }
}

// The Modal itself
.modal {
  @include perspective();
  backface-visibility: hidden;
  @include interface(text);
  width: 100%;
  position: relative;
  background: $modalBackground;
  display: none;
  padding: 30px 12px 25px;
  align-self: flex-start;
  &.current {
    display: block;
    @include animate($modalAnimateName, $modalAnimateDuration);
  }

  &.current ~ .loader-container {
    @include centralLoader();
  }
  box-shadow: $modalBoxShadow;

  &.modal-anim-end {
    animation-name: none !important;
  }
}

// setup z-index just when in container
.modal-container {
  .modal.current {
    z-index: $indexModalCurrent;
  }
}

// Close icon, top right
.modal-close {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 3;
  padding: 9px 10px 10px;
  font-size: 16px;
  cursor: pointer;
  color: lighten($baseColor, 50%);

  &:hover {
    color: $modalCloseHoverColor;
    background: $modalCloseHoverBackground;
  }

  &:active {
    color: $modalCloseActiveColor;
    background: $modalCloseActiveBackground;
  }

}

.modal-title {
  margin: 0 0 1rem 0;
  color: $primaryColor;
}

// An Alert box is always on the bottom on mobile
.modal.alert {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 15px;
  &.current {
    @include animate(fromBottom, .25s);
  }
  box-shadow: none;
  word-wrap: break-word;
}

// desktop version

@media #{$mediaDesktop} {

  .modal-container {
    padding: 20px 20px 0 20px;
    top: 0;

    &.open {
      display: flex;
      justify-content: center;
    }
  }

  .modal {
    width: auto;
    min-width: $minWidthModalDesktop;
    max-width: $minWidthModalDesktop;
    margin-bottom: 20px;
    padding: 25px 30px 25px;

    &.center {
      align-self: center;
    }
  }

  .modal.alert {
    padding-top: 25px;
    min-width: 0;
    box-shadow: $globalBoxShadow;
    position: relative;
    width: $modalAlertWidthDesktop;
    &.current {
      @include animate(bounceIn);
    }
  }

  .modal.small-modal {
    min-width: 0;
    width: $modalWidthSmall;
  }
}