////
/// Dialog
/// A modal that appears above all other content
/// @group dialog
////

// Dialog background color
$am-dialog-background: #fff !default;
// Dialog container border-radius
$am-dialog-border-radius: 2px !default;
// Dialog title padding
$am-dialog-title-padding: am-unit(4) am-unit(3) am-unit(1) !default;

@keyframes am-dialog-fade {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@mixin am-dialog {
  animation: 0.6s am-dialog-fade;
  background: $am-dialog-background;
  border-radius: $am-dialog-border-radius;
  box-shadow: 0 3px 3px rgba(#000, 0.23), 0 3px 3px rgba(#000, 0.16);
  outline: none;
  z-index: $am-elevation-top;
}

@mixin am-dialog-title {
  @include am-type-subheader;
  display: block;
  padding: $am-dialog-title-padding;
}

@mixin am-dialog-footer {
  padding: am-unit(1) am-unit(1) 0;
  text-align: right;
}

@mixin am-dialog-close {
  @include am-btn-icon;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path opacity="0.54" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12 L19,6.41z"/> </svg>') 50% 50% no-repeat;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
