.modal--popup {
  &.modal--active {
    background: $color-alpha--two-30;
  }

  .modal {
    &__dialog::before {
      display: none;
      transition: none;
    }

    &__header {
      opacity: 1;
    }

    &__footer {
      margin-top: -$modal-dialog-spacing;
    }
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .modal--popup {
    background: transparent;
    transition: opacity $transition-duration--fast $transition-duration,
      visibility 0s $transition-duration--slow;

    .modal {
      &__main {
        background: transparent;
        height: auto;
        max-height: calc(75vh - #{$modal-header-height});
        opacity: 1;
        padding-bottom: 120px; // allows for footer with 1 button

        &::after {
          display: none;
        }

        &--overflow {
          padding-bottom: 150px;
        }
      }

      &__dialog,
      &__main,
      &__footer {
        transform: translateY(100%);
      }

      &__main,
      &__footer {
        transition: transform 0s $transition-duration--slow;
      }

      &__dialog {
        bottom: 0;
        height: auto;
        max-height: 75%;
        position: absolute;
        transition: transform $transition-duration $transition-duration--fast;
        width: 100%;
      }

      &__footer {
        margin-top: 0;
        opacity: 1;
        padding: 25px 30px;
      }
    }

    &.modal--active {
      transition: opacity $transition-duration--fast;

      .modal {
        &__main,
        &__dialog,
        &__footer {
          transform: translateY(0);
        }

        &__main,
        &__footer {
          transition: transform $transition-duration--fast $transition-duration;
        }
      }
    }
  }

  .modal--popup.poll .modal__main {
    padding-bottom: 90px;
  }

  .modal--popup.modal--active {
    // 2nd fade in all content (non-animated)
    .modal__main {
      transition-delay: inherit;
      // 3rd slide in fade over content
      &::after {
        transition-delay: inherit;
      }
    }
  }
}

// viewport l
@include viewport--l {
  .modal--popup {
    .modal {
      &__header {
        padding-top: $modal-dialog-spacing--l;
      }

      &__dialog {
        width: $modal-dialog-popup-width;
      }

      &__footer.divider {
        margin-top: 0;
        padding: 30px;
      }
    }
    // popup + corner
    &.modal--corner {
      bottom: 0;
      height: auto;
      padding: 0;
      right: 30px;
      top: auto;
      width: auto;

      &.modal--active {
        background: none;
      }

      .modal__dialog {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-style: solid;
        border-width: 1px;
        margin-top: 0;
        max-height: calc(100vh - #{$modal-dialog-max-top-offset});

        // background mapping
        @include overlays-popup-background-mapping;
      }
    }
    // poll
    .poll {
      margin-bottom: 0;
    }

    .modal__main:not(.modal__main--overflow) .poll {
      margin-bottom: $spacing--m;
    }
  }
}