@import "~@cultureamp/kaizen-component-library/styles/animation";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/layers";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/responsive";

.backdropLayer {
  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
  position: fixed;
  background-color: $black;
  opacity: 0.5;
  z-index: $ca-z-index-modal-backdrop;
}

.scrollLayer {
  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
  position: fixed;
  display: flex;
  align-items: center;
  z-index: $ca-z-index-modal;
  overflow-y: auto;
}

.modalLayer {
  // use flexbox auto margins to horizontally and vertically centre the modal
  // because in IE11, `align-items: center` and `justify-content: center` cause
  // long modal content to become unreachable if they go off-screen
  margin: auto;

  padding: $ca-grid 0;
  width: 100%;
}

.genericModal {
  margin: auto;
  background-color: $kz-color-white;
  border-radius: $ca-border-radius;
  box-shadow: $ca-box-shadow;
  position: relative;
  width: 90%;

  @include ca-media-tablet-and-up {
    width: 100%;
  }
}

// TODO: unify margin top styling
.elmGenericModal {
  @extend .genericModal;
  display: flex;
  flex-direction: column;
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
  z-index: $ca-z-index-modal + 1;
}

:global(.animating-enter),
:global(.animating-appear),
.animatingElmEnter {
  .backdropLayer {
    @include ca-animation-fade(
      $duration: $ca-duration-rapid,
      $from: 0,
      $to: 0.5
    );
  }

  .genericModal,
  .elmGenericModal {
    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
    animation-duration: $ca-duration-fast;
    animation-fill-mode: forwards;
    animation-timing-function: $ca-bounce-in;
  }
}

:global(.animating-exit),
.animatingElmExit {
  .backdropLayer {
    @include ca-animation-fade(
      $duration: $ca-duration-rapid,
      $from: 0.5,
      $to: 0
    );
  }

  .genericModal,
  .elmGenericModal {
    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
    animation-duration: $ca-duration-rapid;
    animation-fill-mode: forwards;
    animation-timing-function: $ca-bounce-out;
  }
}

.unscrollable {
  overflow: hidden !important;
  padding-right: 15px !important;
}

.hide {
  opacity: 0;
  pointer-events: none;
}