@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";

@keyframes dashboardModalBackdropAnimateIn {
  from { opacity: 0; }
  to { opacity: 1 }
}
@keyframes dashboardModalBackdropAnimateOut {
  from { opacity: 1; }
  to { opacity: 0 }
}
@keyframes dashboardModalDialogAnimateIn {
  from { transform: translate(0, 20px) scale(0.98); }
  to { transform: translate(0, 0) scale(1.0); }
}
@keyframes dashboardModalDialogAnimateOut {
  from { transform: translate(0, 0) scale(1.0); }
  to { transform: translate(0, 20px) scale(0.98); }
}

.dashboardModalBackdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;

  display: flex;
  align-items: center;
  padding-top: 8px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 16px;

  opacity: 0;
  pointer-events: none;

  animation: dashboardModalBackdropAnimateOut 0.1s ease-out;
  background-color: rgba(255, 255, 255, 0.95);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  // Should never be below anything on the page
  z-index: 999;
}
.dashboardModalBackdrop.visible {
  pointer-events: auto;
  opacity: 1;
  animation: dashboardModalBackdropAnimateIn 0.1s ease-in;
}
.dashboardModalBackdrop > .dashboardModalDialog {
  animation: dashboardModalDialogAnimateOut 0.1s ease-out;
}
.dashboardModalBackdrop.visible > .dashboardModalDialog {
  animation: dashboardModalDialogAnimateIn 0.1s ease-in;
}

.dashboardModalDialog {
  background-color: #fff;
  border: 1px solid $gray300;

  // https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
  margin: auto;

  width: auto;
  height: auto;

  border-radius: $borderRadiusBase;
  box-shadow: 8px 8px 0px $midnightOpaque05;
}
.dashboardModalDialog:focus { outline: none; }