@import '../../core/stylesheets/variables.scss';

.md-dialog-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 108;

  &.md-active {
    pointer-events: auto;

    .md-dialog {
      opacity: 1 !important;
      transform: scale(1) !important;
      transition: $swift-ease-out;
      transform-property: opacity, transform;

      > * {
        opacity: 1;
      }
    }
  }
}

.md-dialog-backdrop {
  position: fixed;
  z-index: 109;
}

.md-dialog {
  min-width: 280px;
  max-width: 80%;
  max-height: 80%;
  overflow: hidden;
  position: relative;
  z-index: 110;
  outline: none;
  border-radius: 2px;
  opacity: 0;
  box-shadow: $material-shadow-14dp;
  transform: scale(.9, .85);
  transform-origin: top left;
  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function,
              transform $swift-ease-out-duration .05s $swift-ease-out-timing-function;
  will-change: opacity, transform;

  &.md-transition-off {
    transition: none;
  }

  > * {
    opacity: 0;
    transition: $swift-ease-out;
    transition-property: opacity;
    transition-delay: .1s;
    will-change: opacity;
  }
}