// @import '../style/variables';

@mixin np-overlay() {
  $np-backdrop-color: np-color($np-grey, 900);

  // TODO: change from the `md` prefix to something else for everything in the toolkit.

  // The overlay-container is an invisible element which contains all individual overlays.
  .np-overlay-container {
    position: absolute;

    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: $np-z-index-overlay-container;
  }

  // A single overlay pane.
  .np-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $np-z-index-overlay;
  }

  .np-overlay-backdrop {    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: $np-z-index-overlay-backdrop;
    pointer-events: auto;

    // TODO: figure out if there are actually spec'ed colors for both light and dark
    // themes here. Currently using the values from Angular Material 1.
    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
    background: $np-backdrop-color;
    opacity: 0;
  }

  .np-overlay-backdrop.np-overlay-backdrop-showing {
    opacity: 0.48;
  }
}