.modal {
  display: block;
  height: 100%;
  pointer-events: none;
  position: fixed;
  top: 0;
  visibility: hidden;
  transition: visibility 0s $transition-duration;
  width: 100%;
  z-index: 5;

  &--active {
    pointer-events: auto;
    visibility: visible;
  }
  // dialog
  &__dialog {
    // make background transparent, off-white background class is on dialog for
    // the inheritance of link and button colors. Actual background is created
    // using pseudo content below.
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      height: 100%;
      position: absolute;
      opacity: 0;
      top: 0;
      width: 100%;
      z-index: -1;
    }
  }

  // header
  &__header {
    display: flex;
    flex-shrink: 0;
    min-height: $modal-header-height;
    padding: $grid-margin--s $grid-margin--s;
    position: relative;
    z-index: 2;

    &:not(.modal__header--divider-in) {
      border-bottom: 1px solid transparent; // add transparent border so it can animate on overflow scroll
    }

    &--divider-in,
    &--divider-out {
      transition: border $transition-duration--fast 0s;
    }

    .modal__title {
      @include font-style($modal-title-font-style, $modal-title-font-style);
      text-transform: $modal-title-text-transform;
      transition: $transition-duration--faster ease;
      flex: 1;
    }
  }

  &__close {
    margin-left: 30px;
  }

  // main
  &__main {
    height: calc(100vh - #{$modal-header-height});
    position: relative;
    -webkit-overflow-scrolling: touch;

    p:last-child {
      margin-bottom: 0;
    }
  }

  // footer
  &__footer {
    background: inherit;
    padding: $modal-dialog-spacing $grid-margin--s;
    width: 100%;
  }

  // forms
  .form__header {
    margin-bottom: $spacing--s;
  }

  .form-group + .form-group {
    margin-top: $baseline * 1.5;
  }

  .form-group + .button {
    margin-top: $baseline * 2.5;
  }
}

// background mapping
@include overlays-modal-background-mapping;

// viewport s - m
@include viewport--l('inversed') {
  .modal {
    &__dialog {
      height: 100%;
    }

    // all modals except popup
    &:not(.modal--popup):not(.modal--navigation) .modal__header {
      opacity: 0;
      transform: translateY(100px);
      transition: 0s;

      &--divider-in {
        min-height: $baseline * 5;
        padding: $spacing--xs $grid-margin--s $spacing--xs;

        .modal__title {
          @include font-style(
            $modal-header-divider-in-title-font-style--l-inversed,
            $modal-header-divider-in-title-font-style--l-inversed
          );
          text-transform: $modal-title-text-transform;
          transition: $transition-duration--fast ease;
        }

        .modal__close {
          height: $baseline * 3;
          margin-top: $baseline * -0.4;

          .icon {
            width: 15px;
          }
        }
      }
    }

    //all active modals except popup
    &.modal--active:not(.modal--popup):not(.modal--navigation) .modal__header {
      opacity: 1;
      transform: translateY(0);
      transition: transform $transition-duration--slower;
    }

    &__close {
      height: $baseline * 4;
      margin-right: -10px;
      cursor: none;
      margin-top: $baseline * -0.6;
      position: relative;
      width: 40px;

      .icon {
        top: $baseline * 1;
      }
    }

    &__main,
    &__footer {
      opacity: 0;
    }

    &__main {
      overflow-y: auto;
      padding: 0 $grid-margin--s ($baseline * 23); // button + fixed bottom nav
    }

    &__footer {
      bottom: 0;
      position: absolute;
      transform: translateY(100%);
    }
  }
  // modal normal animated properties
  .modal {
    // 1st modal slide down background
    .modal__dialog::before {
      transition: $transition-duration;
    }

    // 2nd fade in all content (non-animated)
    .modal__main {
      transform: translateY(100px);
      // 3rd slide in fade over content
      &::after {
        transition: $transition-duration $transition-duration--faster;
      }
    }

    // 4th fade out footer
    .modal__footer {
      opacity: 0;
      transition: transform $transition-duration,
        opacity $transition-duration--fast $transition-duration--faster;
    }
  }
  // modal active (animation active)
  .modal--active {
    visibility: visible;
    // 1st modal slide down background
    .modal__dialog::before {
      opacity: 1;

      transition: $transition-duration--slow;
    }

    // 2nd fade in all content (non-animated)
    .modal__main {
      opacity: 1;
      transform: translateY(0);
      transition-duration: $transition-duration--slowest;
      // 3rd slide in fade over content
      &::after {
        transform: translateY(100%);
        transition-delay: $transition-duration--slow;
      }
    }

    // 4th fade + slide in footer
    .modal__footer {
      opacity: 1;
      transform: translateY(0);
      transition: transform $transition-duration--fast
          $transition-duration--slower,
        opacity $transition-duration--fast $transition-duration--slower;
    }
  }
}

// viewport l
@include viewport--l {
  .modal {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: center;
    opacity: 0;
    padding: ($baseline * 5) 0;
    transition: background-color $transition-duration,
      opacity $transition-duration, visibility $transition-duration;
    z-index: 3;

    &--active {
      background: $color-alpha--two-70;
      opacity: 1;
    }

    &__dialog {
      border-radius: $border-radius--l;
      display: flex;
      flex-direction: column;
      height: auto;
      margin-top: -$spacing--s;
      max-height: 100%;
      opacity: 0;
      overflow: hidden;
      transform: translateY($modal-dialog-initial-offset);
      transition: transform $transition-duration, opacity $transition-duration;
      width: $modal-dialog-width;
    }

    &--active .modal__dialog {
      opacity: 1;
      transform: translateY(0);
    }

    &__close {
      height: $icon-size--l;
    }

    &__header,
    &.form__header {
      padding-top: $modal-dialog-spacing--l;
    }

    &__header,
    &__main {
      padding-left: $modal-dialog-spacing--l;
      padding-right: $modal-dialog-spacing--l;
    }

    &__footer {
      padding: $spacing--m $modal-dialog-spacing--l;
      position: static;
    }

    &__main {
      height: 100%;
      overflow-y: auto;

      &--overflow {
        border-bottom: 0;
      }

      // create bottom padding (Firefox/Edge flexbox workaround)
      &--overflow::after {
        content: '';
        display: block;
        padding-bottom: $spacing--m;
      }
    }
  }
}

// general styling on body
html.modal-open body {
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}