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


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

  // TODO(jelbourn): 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.
  .md-overlay-container {
    position: fixed;

    // 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: $md-z-index-overlay-container;
  }

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

  .md-overlay-backdrop {
    // TODO(jelbourn): reuse sidenav fullscreen mixin.
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

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

    // TODO(jelbourn): 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;
    opacity: 0;
  }

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

  .md-overlay-dark-backdrop {
    background: $md-dark-backdrop-color;
  }

  .md-overlay-transparent-backdrop {
    background: none;
  }
}