// Dialog
.lui-dialog {
  .lui-dialog-title {
    padding: $desktop-gutter $desktop-gutter 0 $desktop-gutter;
    margin-bottom: 0;
    font-size: 25px;
  }

  .lui-dialog-content {
    padding: $desktop-gutter;
  }
}

// Dialog Window
.lui-dialog-window {
  position: fixed;
  z-index: 999999;
  top: 0px;
  left: -10000px;
  width: 100%;
  height: 100%;
  @include transition(left 0ms $ease-out-function 450ms);

  .lui-dialog-window-contents {
    @include ease-out();
    position: relative;
    width: 75%;
    max-width: ($desktop-keyline-increment * 12);
    margin: 0 auto;
    z-index: 10;
    background: $canvas-color;
    opacity: 0;
    @include transform-origin(0% 0%);
  }

  .lui-dialog-window-actions {
    padding: 8px;
    margin-bottom: 8px;
    width: 100%;
    text-align: right;

    .lui-dialog-window-action {
      margin-right: 8px;
    }
  }

  &.lui-is-shown {
    left: 0px;
    @include transition(left 0ms $ease-out-function 0ms);

    .lui-dialog-window-contents {
      opacity: 1;
      top: 0px;
      @include transform(translate3d(0, $desktop-keyline-increment, 0));
    }
  }
}

// Overlay
.lui-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9;
  top: 0px;

  left: -100%;
  background-color: rgba(0, 0, 0, 0);
  @include transform(transition(left 0ms $ease-out-function 400ms, background-color 400ms $ease-out-function 0ms));

  &.lui-is-shown {
    left: 0px;
    background-color: $light-black;
    @include transform(transition(left 0ms $ease-out-function 0ms, background-color 400ms $ease-out-function 0ms));
  }
}