// Container that the modal scrolls within
.modal {
  &.show {
    display: block;
  }

  &.scrollable {
    overflow: auto;
  }
}

// Title text within header
.modal-title {
  margin: $modal-title-margin;
}

.modal-subtitle {
  margin: $modal-subtitle-margin;
  font-weight: normal;
  line-height: $modal-subtitle-line-height;
}

.modal-content {
  box-shadow: $modal-content-box-shadow;
}

.modal-body {
  flex: 1 1 100%;
}

.hidden-overflow {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

// Scale up the modal
@include media-breakpoint-up(sm) {
  .modal-dialog-centered {
    min-height: 250px;
  }

  .modal-dialog {
    width: $modal-md;
    max-width: 100%;
  }

  .modal-responsive {
    width: 100%;
    max-width: $modal-responsive-max-width;
  }

  .modal-sm {
    width: $modal-sm;
    max-width: 100%;
  }

  .modal-xs {
    width: $modal-xs;
    max-width: 100%;
  }
}

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
    width: $modal-lg;
    max-width: 100%;
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl {
    width: $modal-xl;
    max-width: 100%;
  }
}