// Show supplementary information to a user without leaving the page. Fills screen on mobile, centered with overlay on tablet/desktop.
//
// Styleguide 4.4.1 - Modal (Popup)

.modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  .modal-content {
    position: relative;
    background: #fff;
    z-index: 1050;
    width: auto;
    padding: 2rem 1.5rem;
    margin: 0;

    @include media($tablet) {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      max-width: 600px;
      min-height: 0;
      margin: 5rem auto;
    }

    .modal-close-button {
      @include close-parent;

      &.-alt {
        font-size: 1rem;
        top: 1.25rem;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    h2 {
      margin-bottom: 1rem;
    }

    }
  }
}

body.modal-open {
  overflow: hidden;
}

// Show supplementary information to a user without leaving the page. Fills screen on mobile, centered with overlay on tablet/desktop.
//
// Styleguide 4.4.1 - Modal (Popup)

.modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  .modal-content {
    position: relative;
    background: #fff;
    z-index: 1050;
    width: auto;
    padding: 2rem 1.5rem;
    margin: 0;
    word-wrap: break-word;

    @include media($tablet) {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      max-width: 600px;
      min-height: 0;
      margin: 5rem auto;
    }

    .modal-close-button {
      @include close-parent;

      &.-alt {
        font-size: 1rem;
        top: 1.25rem;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    h2 {
      margin-bottom: 1rem;

      &.banner {
        // fit this guy to edge of modal
        margin: -2rem -1.5rem 1rem;
      }
    }

    // Ensure modal images do not break out of their
    // parent containers on mobile
    img {
      width: 100%;
      height: auto;
    }
  }
}

body.modal-open {
  overflow: hidden;
}

Bring modal style overrides from DS app into Neue.
Bring modal style overrides from DS app into Neue.
