.modal {
  background: $modal--overlay;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.5s;
  width: 100%;
  z-index: 100;

  &__content {
    background: $modal--background;
    border-radius: 5px;
    box-shadow:
      0 0 0 1px $modal--content--border,
      0 0 35px $modal--content--shadow;
    left: 50%;
    max-height: 80%;
    max-width: 80%;
    overflow: auto;
    padding: 30px;
    position: absolute;
    top: 10%;
    transform: translate(-50%, 0);
    width: 500px;

    &--align-center {
      text-align: center;
    }
  }

  &__footer {
    margin-top: $spacing-unit;
  }

  &__button-group {
    text-align: right;

    .button {

      & + .button {
        margin-left: 20px;
      }
    }
  }

  &__header {
    color: $modal--header--foreground;
    font-size: 1.1em;
    font-weight: 400;
    margin-bottom: 20px;
  }

  &__animation-enter {
    opacity: 0;
  }

  &__animation-enter-active {
    opacity: 1;
  }

  &__animation-leave {
    opacity: 1;
    pointer-events: none;
  }

  &__animation-leave-active {
    opacity: 0;
  }
}