$modalTop: getCssVar(modal-top);

.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  width: 50vw;
  transition-timing-function: ease-in-out;
  transition-property: transform, opacity;
  transform: scale(0);
  opacity: 0;
  top: var($modalTop);
  max-height: var(getCssVar(modal-max-height));
  overflow: auto;
  will-change: transform, opacity;

  &.active {
    transform: scale(1);
    opacity: 1;
  }

  @include responsive('sm-down') {
    width: 80vw;
  }

  .modal-header {
    padding: 0.75rem;
    font-size: 1.5rem;
  }

  .modal-content {
    padding: 0.75rem;
  }

  .modal-footer {
    padding: 0.75rem;
  }

  &.modal-falling {
    top: -20%;
    will-change: opacity, top;
    transition-property: top, opacity;
    transform: none;

    &.active {
      top: var($modalTop);
    }
  }

  &.modal-bouncing {
    animation: bouncing;
    animation-timing-function: ease;
  }

  @keyframes bouncing {
    from {
      transform: scale(0);
      opacity: 0;
    }

    50% {
      transform: scale(1.05);
      opacity: 1;
    }

    75% {
      transform: scale(0.95);
      opacity: 1;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}