@import '../../_style/animation/variables.scss';
@import '../../_style/elevation/mixins.scss';
@import '../../_style/layout/mixins.scss';

.md-dialog {
  @include md-elevation(24);

  min-width: 280px;
  max-width: 80%;
  max-height: 80%;
  margin: auto;
  display: flex;
  flex-flow: column;
  flex-direction: row;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 110;
  border-radius: 2px;
  backface-visibility: hidden;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.md-dialog-enter,
.md-dialog-leave {
  transition: opacity 0.15s $md-transition-stand-timing, transform 0.2s $md-transition-stand-timing;

  > .md-dialog-tabs,
  > .md-dialog-title,
  > .md-dialog-content,
  > .md-dialog-actions {
    transition: opacity 0.3s $md-transition-default-timing, transform 0.25s $md-transition-default-timing;
  }
}

.md-dialog-enter,
.md-dialog-leave-active {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);

  > .md-dialog-tabs,
  > .md-dialog-title,
  > .md-dialog-content,
  > .md-dialog-actions {
    opacity: 0;
    transform: scale(0.95) translate3d(0, 10%, 0);
  }
}

.md-dialog-enter-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);

  > .md-dialog-tabs,
  > .md-dialog-title,
  > .md-dialog-content,
  > .md-dialog-actions {
    opacity: 1;
    transform: scale(1);
  }
}

.md-dialog-container {
  display: flex;
  flex-flow: column;
  flex: 1;

  .md-tabs {
    flex: 1;
  }

  .md-tabs-navigation {
    padding: 0 12px;
  }

  .md-tab {
    @include md-layout-xsmall {
      padding: 12px;
    }
  }
}

.md-dialog-fullscreen {
  @include md-layout-xsmall {
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    transform: none;

    &.md-dialog-enter {
      opacity: 0;
      transform: translate3d(0, 30%, 0);
    }

    &.md-dialog-leave-active {
      opacity: 0;
      transform: translate3d(0, 0, 0);
    }
  }
}