// # Dialog
// Dialog boxes and overlays with three width options:

// - `.#{$namespace}dialog` is the default
// - `.#{$namespace}dialog--wide`
// - `.#{$namespace}dialog--narrow`

// ## Example

// For purposes of this documentation the following example has its width set to `auto`.
// Real world usage will always have widths.

// <div class="example html">
//     <div class="lego-dialog">
//       <div class="lego-dialog__header">
//         <div class="lego-dialog__title">Dialog Title</div>
//       </div>
//       <div class="lego-dialog__body">
//         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ab quaerat dolor autem pariatur iure nisi debitis, dolores possimus ut, optio magni ratione incidunt cumque, inventore alias? Fugit, iusto eum.</p>
//       </div>
//       <div class="lego-dialog__footer lego-button-row--right">
//         <button class="lego-button">Cancel</button>
//         <button class="lego-button lego-button--brand">Done</button>
//       </div>
//       <div class="lego-dialog__close">
//         <svg class="lego-icon">
//           <use xlink:href="#close"></use>
//         </svg>
//       </div>
//     </div>
// </div>

.#{$namespace}dialog {
  position: relative;
  box-shadow: 0 0 map-fetch($shadow, big);
  width: map-fetch($dialog, width base);

  &--narrow {
    width: map-fetch($dialog, width narrow);
  }

  &--wide {
    width: map-fetch($dialog, width wide);
  }

  &__header,
  &__body,
  &__footer {
    padding: spacer(2);
  }

  &__header,
  &__footer {
    background-color: map-fetch($color, background faint);
  }

  &__header {
    border-bottom: 1px solid map-fetch($color, ui light);
  }

  &__footer {
    border-top: 1px solid map-fetch($color, ui light);
  }

  &__title {
    font-size: map-fetch($font, size beta);
    color: map-fetch($color, text brand-dark);
    line-height: 1;
  }

  &__body {
    @extend %kill-last-child-margin;
    background: map-fetch($color, background white);
    padding-bottom: spacer(3);
  }

  &__close {
    @include flex-center;
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    background: map-fetch($color, background black);
    color: map-fetch($color, ui white);
    border: 2px solid map-fetch($color, ui white);
    box-shadow: 0 0 map-fetch($shadow, big);
    z-index: 1; // This is needed to bring the close icon above the dialog background.
  }
}