@import "../../Mixins";

.dialog-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  background: $dialogOverlay-background;
}

.dialog {
  @include dialog-wrapper;
  position: absolute;
  background: #fff;
  max-height: 100%;
  min-height: 100px;
  min-width: 320px;
  max-width: 100%;
  overflow: hidden;

  .dialog-title-bar {
    height: $dialog-title-bar-height;

    .dialog-title {
      padding: 6px 0 0 20px;
      font-size: 16px;
    }

    .dialog-close {
      float: right;
      padding: 6px 10px 0 0;
      cursor: pointer;
    }
  }

  .dialog-content {
    padding: 10px 20px;
    // #max-height: 100%; // never set this, leads to wrong results in js size calculation
    max-width: 100%;
    @include clear;

    &.overflow{
      overflow: auto;
      max-height: calc(100% - #{$dialog-title-bar-height});
      max-width: 100%;

      // transition should be triggered for IE to update the overflow properly...
      transition: margin 0.3s;
      margin-bottom: 0.1px;
    }
  }
}

/* animations */

.show {
  .dialog {
    transition: opacity .3s ease;
  }
}
.grow {
  .dialog {
    transition: width .2s ease, height .2s ease, opacity .3s ease, top .2s ease, left .2s ease;
  }
}
.all {
  .dialog {
    transition: all .3s ease;
  }
}

.animating.growing {
  .dialog-content {
    height: 100%;
  }
}