@import '../abstract/_all';



.md-dialog-overlay {
  background-color: rgb(0 0 0 / 50%);
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity 0.3s ease-in-out;
  width: 100%;
  z-index: 2000;
}
.md-dialog {

  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  z-index: 2050;
  height: 100%;
 
}
.md-dialog-container {
  overflow: hidden;
  background-clip: padding-box;
  background-color: white;
  width: 100%;
}


.md-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  @media (min-width: $break-sm) {
    padding: 24px 60px 24px 40px;
  }
  .btn-close {
    position: absolute;
    right: 8px;
  }
}
.md-dialog-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px 32px;
  @media (min-width: $break-sm) {
    padding: 24px 40px;
  }
}
.md-dialog-footer {
  align-items: center;
  display: flex;
}
.md-dialog-sm {
  max-width: 424px;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  width: 100%;
}
.md-dialog-xl {
  max-width: 720px;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

body {
  &.md-open-dialog {

    .md-dialog-overlay {
      opacity: 1;
      pointer-events: auto;
    }
  }
}



.md-dialog-content-xxs {
  max-width: 320px;

  @media (min-width: $break-sm) {
    max-width: 445px;
  }
}

.md-dialog-content-xs {
  max-width: 295px;
}

.md-dialog-content-sm {
  max-width: 445px;
}

.md-dialog-content-md {
  max-width: 595px;
}

.md-dialog-content-lg {
  max-width: 899px;
}

.md-dialog-content-xl {
  max-width: 950px;
}