// Modal
//
// Show supplementary information to a user without leaving the page. Fills
// screen on mobile, centered with overlay on tablet/desktop. Use `.modal__block`
// element to add padding inside the modal. (This allows "full-width" modal content
// to work without a negative margin.)
//
// See [DoSomething/modal](https://www.github.com/dosomething/modal) for configuration options.
//
// Markup:
//   <a href="http://www.example.com" data-modal-href="#example-modal" class="btn secondary">Show example modal</a>
//   <div data-modal id="example-modal" role="dialog">
//     <h2 class="heading -banner">Example Content</h2>
//     <div class="modal__block">
//       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem,
//        officia impedit eius velit consectetur provident ullam! Incidunt, rem,
//        maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi,
//        eum, accusamus.</p>
//     </div>
//   </div>
//
// Styleguide Modal

// Additional styles for modals.
// See http://www.github.com/DoSomething/modal
[data-modal] {
  .heading.-banner {
    // make space for "x" button and add proper left spacing
    padding-left: $base-spacing;
    padding-right: 72px;
  }
}

.modal-close-button {
  @include media($medium) {
    font-size: 42px;
  }
}

// Modal content block
// Adds proper spacing around content in modal.
.modal__block {
  padding: $base-spacing;
}

// Add support for modal overlay in IE8
.modernizr-no-svg .chrome.has-modal {
  &:after {
    background: neue-asset-url('images/fallbacks/ie8-rgba-black-50.png');
  }
}