.modal {
  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    display: table;
  }

  .modal-wrapper {
    vertical-align: middle;

    height: 100%;
    overflow: hidden;
  }

  .modal-container {
    @include breakpoint(mobile) {
      width: 90vw;
    }
    @include breakpoint(tablet) {
      width: 50vw;
      max-height: calc(100vh - 380px);
      overflow-y: auto;
    }

    margin: 190px auto;

    padding-top: calculateRem(40);
    padding-right: calculateRem(40);
    padding-bottom: calculateRem(40);
    padding-left: calculateRem(40);

    background-color: $background-white;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
  }

  .modal-header h3 {
    margin-top: 0;
  }

  .modal-body {
    margin: 20px 0;
  }

  .modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;

    button.button:not(:first-child) {
      margin-left: 10px;
    }
  }

  &.dark {
    .modal-container {
      background-color: $builda-gray;
      color: setTextColor($builda-gray);
    }
  }
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active, .modal-enter-active {
  transition: opacity .3s ease;
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: scale(1.1);
}
