@import '../../styles/common.scss';

.container {
  @include boxSizing;

  height: 100%;

  display: grid;
  grid-template-rows: max-content;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  position: fixed;
  justify-content: center;

  padding: 70px 30px 30px 30px;

  &.show {
    z-index: 9999;
    background-color: var(--modal-back-drop-color, $modal-back-drop-color);

    animation: fade-in 0.5s ease-out;
  }

  &.hide {
    animation: fade-out 0.25s ease-in;
  }

  .child {
    height: 100%;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

    box-shadow: var(--modal-box-shadow, $modal-box-shadow);
  }

  &:hover {
    background-color: var(
      --modal-back-drop-color,
      $modal-back-drop-color
    ) !important;
  }

  // To avoid the Modal container padding overwritten by parent container
  &.container {
    padding: 70px 30px 30px 30px;
  }
}

.enter {
  transform: translateY(100vh);
}

.enterDone {
  transition: transform 0.15s ease-out;
  transform: translateY(0);
}

.exit {
  transform: translateY(0);
}

.exitActive {
  transition: transform 0.15s ease-in;
  transform: translateY(100vh);
}

@keyframes slide-up {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    background-color: var(
      --modal-back-drop-color-hidden,
      $modal-back-drop-color-hidden
    );
  }
  100% {
    background-color: var(--modal-back-drop-color, $modal-back-drop-color);
  }
}

@keyframes fade-out {
  0% {
    z-index: 9999;
    background-color: var(--modal-back-drop-color, $modal-back-drop-color);
  }
  99% {
    z-index: 9999;
    background-color: var(
      --modal-back-drop-color-hidden,
      $modal-back-drop-color-hidden
    );
  }
  100% {
    z-index: -1;
  }
}
