.modal {
  display : block;

  &.hidden {
    display : none;
  }

  &.modal-fade-enter {
    @include transition(all 0.5s $ease-in-quart);
    opacity   : 0.1;
    transform : translateY(-100px);

    &.modal-fade-enter-active {
      opacity   : 1;
      transform : translateY(0);
    }
  }

  &.modal-fade-leave {
    @include transition(all 0.2s $ease-out-quart);
    opacity   : 1;
    transform : translateY(0);

    &.modal-fade-leave-active {
      opacity   : 0;
      transform : translateY(-100px);
    }
  }
}

.overlay {
  &.modal-overlay {
    z-index : 999;
  }
}